Visual Design. Anastasia Kuzminykh

Transcription

1 Visual Design Anastasia Kuzminykh

2 Why discuss visual design? You need to present the elements of your interface to the user! User needs to know: What can I do in this interface? Where is? What is expected of me? What is related to what? Want to impose as little thinking as possible on the user. Allow them to concentrate on their task, not the interface.

3 Objectives Highest level goals: Create desired relationships and avoid undesired relationships Or to create a presentation that... has an attractive look is easy to understand at a glance has a distinctive look, across many windows, and to avoid a presentation that... is cluttered and hard to organize is hard to perceive clearly contains excessive idiosyncrasy makes the user stop and think to avoid errors

4 How? Shneiderman (1987) strive for consistency cater for universal usability offer informative feedback design task flows to yield closure prevent errors permit easy reversal of actions make users feel they are in control minimize short-term memory load Nielsen and Molich (1990) consistency and standards visibility of system status match between system and real world user control and freedom error prevention recognition rather than recall flexibility and efficiency of use aesthetic and minimalist design help users recognize, diagnose and recover from errors provide online documentation and help

5 Designing with Mind in Mind

6 How? Design with the human brain s conscious and unconscious capabilities in mind: Keep things simple People have limited cognitive processing power. Leverage pre-attentive processes. Pre-attentive processes Happen at a lower-level than conscious thought. Do a huge amount of work out of sight, and give your conscious mind the results. Rest of the Discussion: Simplicity Organization and Structure

7 Simplicity In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away. -- Antoine de Saint Exupery

8 Simplicity Present the minimum amount of information to achieve maximum effect Simplicity leads to quickly recognized and understood functionality Less information means less time to process Can more quickly produce correct mental models Simplicity also aids recall Less to remember, so easier to recall

9 Simplicity

10 Simplicity

11

12

13 Only Absolute Essentials

14 How to achieve simplicity? Reduce, reduce, reduce Reduce some more Reduce until it hurts

15 Organization and Structure Gestalt Principles

16 Creating organization and structure Structure doesn t occur naturally, it must be explicitly created, designed. People will find order and structure, even if none was intended. Don t just throw elements into a UI! You need to explicitly create the structure. Consciously consider what placement and arrangement communicates to the user. The Gestalt principles can help with this.

18 Proximity Individual elements are associated more strongly with nearby elements than with those further away. Spacing stars more closely vertically gives an impression of columns; spacing more closely horizontally gives an impression of rows.

19 Proximity Individual elements are associated more strongly with nearby elements than with those further away Big Bend National Park (US)

20 Real Life Example (from two CS349 students)

21 Proximity Individual elements are associated more strongly with nearby elements than with those further away

24 Grouping vs. Ambiguity Proximity and Similarity describe how we group objects. The next set of Gestalt Principles describe how we deal with ambiguity and fill in missing data.

25 Continuity Our visual system is biased to perceive continuous forms rather than disconnected segments. Elements arranged in a straight line or a smooth curve are perceived as being more related than elements not on the line or curve.

26 Continuity

27 Continuity

28 Closure The principle of closure applies when we tend to see a complete figure even when part of the information is missing. We tend to perceive a set of individual elements as a single, recognizable pattern, rather than multiple individual elements.

29 Closure

30 Figure/Ground (aka Area) Our mind separates the visual field into the figure (or foreground) and the ground (or background). Figure is the visual element that is interpreted as being the object of interest. Ground is the area on which it rests (and everything else). Examples: This slide UI window with widgets Watermarked backgrounds

32 Symmetry Symmetrical, unconnected elements are integrated into one coherent object The greater the symmetry, the more we ascribe meaning and relationships in a composition Separately, symmetry has long been associated with beauty This principle is here for completeness; doesn t seem that relevant to user interfaces.

34 Uniform Connectedness Elements connected to one another by uniform visual properties are perceived to be more related than elements that are not connected Two typical strategies: connecting lines connecting regions

35 Uniform Connectedness Uniform Connectedness Proximity, Similarity

36 Alignment? Is alignment a Gestalt principle? It s a powerful organizing tool Some folks in the design community include it (search the web) Doesn t appear to be in the original literature, but many rules were added over a span of time Could be an application of Similarity Personal opinion: It should be

37 Ursus Wehrli tidies up art

38 Creating Organization and Structure We can use insights from the Gestalt principles to organize and structure user interfaces Three techniques: Grouping Hierarchy Relationship

48 Proximity Items relating to each other should be grouped close together. When several items are in close proximity to eah other, they become one visual unit rather than several separate units. This helps organize information and reduces clutter. (Williams, p. 14)

49 Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look. (Williams, p. 14) Edge alignment Centre alignment

50 Repetition Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc. This helps develp the organization and strengthens the unity. (Williams, p. 14)

51 Contrast The idea behind contrast is to avoid elements on the page that are mearly similar. If the elements (type, color, size, line thickness, shape, space, etc) are not the same, then make them very different. Contrast is often the most important visual attraction on the page. (Williams, p. 14)

60 Summary Strive for simplicity! The Gestalt principles provide insights into the pre-attentive processes in the brain. Use the principles to structure a visual design by: Grouping visual information into higher-level units. Creating a hierarchy to guide the user s viewing. Establishing relationships between related elements. Don t leave visual design up to chance! Think about your design, and test it out.

Software Engineering Research Group MSc Thesis Style Version of July 5, 2007 Leon Moonen Software Engineering Research Group MSc Thesis Style THESIS submitted in partial fulfillment of the requirements

University of Waterloo Faculty of Engineering Department of Electrical and Computer Engineering Writing a Structurally Coherent Report University of Waterloo 200 University Avenue West Waterloo, Ontario,

lloyd s coverholders brand GUIDELINES contents Introduction Quick questions Part One: How may I describe my relationship with Lloyd s? Part Two: How may I use the Coverholder at Lloyd s logo? Further information

BRAND GUIDELINES Version 1.1 September 09 1 Contents The Story Behind Our Identity 04 Where the wandering water gushes From the hills above Glen Car The New IT Sligo Logo 05 The Name of the Institute &

Example for pageslts keys This example demonstrates the most common uses of package pageslts, v1.2c as of 2014/01/19 (HMM). The used options were pagecontinue=true, alphmult=ab, AlphMulti=AB, fnsymbolmult=true,

Sample Brand Strategy // LAST MODIFIED May 14, 2014 BY CHRIS FORD // INTRODUCTION This document will define the most important aspects of your brand: your brand vision, brand values, the identity of your

& associates Marketing & Branding Your Business & associates Fundamentally, your business runs on the quality of the relationships you develop. The Mile Stone Marketing Method (M 3 ) puts you in a position

Using Microsoft Word 2003 (or earlier) to Prepare APA-formatted Papers Welcome I hope that you enjoy writing. It can be one of the most rewarding tasks, especially for a scholar. Many computer users do

No 3 NYU IDENTITY DESIGN GUIDE Visual identity is more than a logo. NYU is a large and diverse community where individual expression is celebrated, as it should be. Rather than create new logo marks, we

GUIDE TO UNDERSTANDING AND APPLYING THE DON DIFFERENCE TEMPLATES AND DIGITAL ASSETS 15-05-1670-d v.01 August 11, 2015 Purpose of this Manual The guidelines in this manual are designed to create a flexible

UNIVERSITY OF NEW HAVEN Poisson Kernel Estimates of Lexigraphic Matrices Jane Q. Student An Undergraduate Thesis Submitted to the Department of Mathematics and Physics of the University of Newhaven May

Graphic Guidelines Second Edition CONTENTS i THE INTRODUCTION The importance of brand identity across the University ii THE LOGO a. Give it space to breathe b. Little and large c. What not to do d. Getting

Setting Up Our Work Environments Setting Up Our Work Environments Create and account at GitHub github.com Setting Up Our Work Environments Sign into Cloud9 with your GitHub Account c9.io Setting Up Our

vehicle tracking & fleet management system about arvento Arvento was founded in 2005 with one goal in mind, to provide rich, reliable vehicle tracking systems for Turkey and world. Today, Arvento as one

Skills Guide: How to write a press release Who is Who? Who? Communications was created by Will Hoyles, a public relations and communications expert with over six years experience of delivering high quality

A Guide to the Utah State University Visual Identity Program www.usu.edu/prm/identity Edition One (v8, 02/10/2015) 2 table of contents Letter from the President.... 3 Introduction.... 4 Approval process...

Graphic Identity Standards Guide MARCH 2014 EDITION Date of Issue: PHase 2, March 2014 This guide is a publication of The office of Communications, Marketing and Brand Management, The College of New Jersey

ACS Mexico Our Goal Is Service ACS Mexico is the offshore operation that is closest to the heart of Xerox and the rest of the world. Spanning four sites in Hermosillo, Juarez, Monterrey and Reynosa our

This page presents most of typographical aspects of JA Quartz Make your readers happy with great Typography and User Experience! This is an Heading 1 Lorem tortor Curabitur urna interdum Maecenas ut felis

BIG DATA AND ITS BIG POTENTIAL: Exploring Opportunity at the Intersection of the Smart Grid and Human Behavior Behavior Energy and Climate Change Conference November 19, 2013 What potential does big data

European E-Commerce, E-Fulfilment and Job Creation October 2015 As grows and evolves, so too will the supply chains, facilities and talent that support the critical functions of e-fulfilment. E-fufilment

An Example of the Usage of the Tufte-Handout Style The Tufte-LATEX Developers June 2, 205 Inspired by Edward R. Tufte! This document describes the Tufte handout LATEX document style. It also provides examples

Argus One Page Responsive Template Thanks for purchasing the template and for supporting our work. Argus is our new fancy template. Responsive, clean and professional look with sleek design will satisfy

United States Postal Service Postal Service Postal Customer Council Graphic Guidelines July 2009 TABLE OF CONTENTS: Introduction...2 Usage...5 Placement...7 Newsletter...9 Reproduction...13 Business Cards...15

National History Day Making Exhibits Original Presentation made by Wanda Chin, Exhibition and Design Director at the University of Alaska Museum of the North, on November 29, 2006. 1 Category Rules: Exhibit

This is our promise Style Guide for the Brand Introduction PC has adopted a new branding strategy. The goal is to establish what makes us unique, and to strengthen our reputation among our constituents.

about arvento Arvento Mobile Systems is a technology company based in Turkey, specialized in designing, developing and manufacturing mobile tracking technologies and telematics products. Arvento is one

Abilene Christian University Graduate School Doctor of Ministry Thesis Sample Pages Updated August 2015 ABSTRACT This doctor of ministry thesis presents the findings of a project in which I led a group

Observing and analysing digital writing processes with Inputlog & Introduction Faculty of Applied Economics Department of Management Teaching: Business Communication (Dutch) Research group on Writing and

The Blogger s Guide to Banner Ads Monetize Your Site! How to use this Guide Once you decide to start monetizing your blog, figuring out where to start is probably the hardest part. Banner ads are probably

A C L A S S I C T H E S I S S T Y L E andré miede An Homage to The Elements of Typographic Style September 2015 version 4.2 André Miede: A Classic Thesis Style, An Homage to The Elements of Typographic

Graduate Research School Thesis Format Guide The Graduate Research School A guide for candidates preparing to submit their thesis for examination GRADUATE RESEARCH SCHOOL The University of New South Wales

RBS Group Identity Guidelines Group branded Stationery 1 Contents Page Title The RBS group provides financial services through more than 40 well known brands. In order for the Group to maintain consistency

business model WE ARE A START-UP based on SaaS business model (Software as a Service) targeted to COMPANIES and to MEETING, EVENT & TRAINING PROFESSIONALS delivering a unique-on-the-market INTEGRATED GUEST

lloyd s BROKERs brand guidelines contents Introduction Quick questions Part One: How may I describe my relationship with Lloyd s? Part Two: How may I use the Broker at Lloyd s logos? Promotional material

Home Welcome to the Regional Leadership Program Manager Certification course website! Here you will find all the learning modules and content materials we will engage with over the next 12 weeks. Please

Better Financial Planning Budget Report 2015 From Austerity to Prosperity? George Osborne said in his 2015 Budget on March 18th, that they will use whatever resources they have to get the deficit down.

VISUAL BRAND GUIDELINES When creating Toastmasters materials for your club or district, please visit www.toastmasters.org/creatingmaterials for more information before your design is printed or distributed.

A BERKSHIRE MARKETING GROUP CASE STUDY JEFFERSON COMMUNITY COLLEGE There Really Is More Here With this one simple secret, you can change the world. LEARN MORE AT SUNYJEFFERSON.EDU JEFFERSON COMMUNITY COLLEGE