Quiz 11/14

Design principles for wearables: Design for Offline

Don't assume that smartwatches are always online You should build core functionality into offline mode. If you can't, then you should at least explain to the user what's happening.

Gestalt Theory: Continuity

Elements arranged in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve.

Gestalt Theory: Proximity

Elements closer together are interpreted as being more related than elements that are far apart.

Gestalt Theory: Similarity

Elements that are similar are perceived to be more related than elements that are dissimilar.

3. It is easier to perceive a structured layout (Gestalt Theory)

Figure/Ground: Elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field)

1. Users see what they expect to see

Users are not good at handling unexpected situations Principles: Consistency: Users are not good at handling unexpected situations Exploiting prior knowledge: Apply prior knowledge and experience

Norman's 6 Design Principles: Visibility

Visibility - can I see it? Just by looking, the user should know what to do: State of the system Possible actions

Visual Components

Visual Design→Typography, Grid, Layout, Color Typography: The style and appearance of printed matter One of the principles of durable typography is always legibility In UI, we care about legibility but we also care about mood, personality, vibrancy, and energy. Each can be established or reinforced with appropriate typography F (serif) F (sans serif) Grid: A framework of spaced bars that are parallel to/cross each other; A system without a principled layout appears disorganized and can be confusing. Golden Ratio: The perfectly symmetrical relationship between two proportions Grids and Rule of thirds A technique of composition in which a medium is divided into thirds, creating aesthetic positions for the primary elements of a design. Visual design: visual path A designer's intention of how information is being perceived and in what order. Visual hierarchy Applying visual hierarchy to webpage content Use visual hierarchy to: Create a center of interest that attracts users attention Create a sense of order and balance Guide the user through your UI - Visual path Tell a story...Like all good stories, there should be a beginning, an end, and a point Color=important; color affects meaning Even when verbal commands are included, changing colors can confuse the meaning: Cognitive dissonance Color affects meaning and interpretations Color is more than just a visual phenomenon. Each color we use conveys both tone and meaning; which is essential to affecting audiences' judgments and reactions Color perception Avoid using blue for text in small screen elements Our ability to distinguish color is directly related the size of an object Color perception is weak in our peripheral vision Center of retina (high acuity) has no blue cones, so very small blue objects you fixate on tend to disappear Color Deficiency "Color blindness" affects a substantial portion of the human population. For individuals with Northern European ancestry, as many as 8% of men and 0.5% of women have red-green color vision defects How many colors in UI design? A good rule of thumb is between 3-5 (or less!) How to choose a color Match color to feel application (is it fun? serious?) Be inspired by nature, existing products Use a color chooser tool Think about color temperature Warm Colors: Warm colors are reds, oranges, yellows Generally energizing, passionate, positive Red & yellow are primary colors, with orange in the middle, which means warm colors cannot be created with a cool color Cool Colors: Cool colors include green, blue, purple Blue is the only primary color within cool spectrum, which means other cool colors are created by combining blue with a warm color Use cool colors to give a sense of calm/ professionalism Neutral Colors: Neutral colors include grays, browns Often serve as backdrop in design Combine them with accent colors or use them Alone for a minimalistic, clean loo Complementary Colors: orange and blue, red and green Quadratic Colors: red, orange, green, blue Design with many colors is hard! The colorful interfaces take a lot of skill to design. Designs that have lots of color require lots of thought about selecting colors that all work together. This is really hard and takes experience. When pulled off well, it can create a very nice fun, flashy aesthetic. But it's easy to do poorly! Simple technique: Pick one color (hue). Keep it simple. Having too many colors undermines a clean look. Grayscale + One Hue is a simple, easy-to implement approach for forcing you to focus on things like layout, sizing, spacing, etc Make Gray Your Best Friend Gray is very useful in information visualization for focusing attention

User Interface: Visual Design

Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements Basic Elements of Visual Design Lines, Shapes, Color, Texture, Typography, Form Visual design: visual path Visual paths guide users from one element to another, and allow designers to control how information is being perceived and in what order. Color: Use one to two colors that will serve as a visual path Type: Use consistent font style, color, and behaviors to allow users to quickly scan the page Grid and shapes: Use modular grid systems supported by negative space for well balanced and organized design.

Gestalt Theory: Rubin Vase

When confronted by a visual image, our perceptual system separates a dominant shape (a "figure") from a "background"

Norman: Affordance

how do I use it Giving a clue to its operation. An attribute of an object that allows people to know how to use it Mouse button → push Door handle → pull Glass → see through Norman considers affordance to be a relationship between an object and a user, NOT property of an object

User-centered design

user interface design knowledge from users: need to know about the users and their tasks

Norman: Feedback

what has been accomplished, allowing the person to continue with the activity Tactile Visual Verbal Audio Combinations of these

Norman: Mapping

where am I and where can I go? Controls and displays should exploit natural mapping

Norman: Consistency

- I think I have seen this before Provide similar operations and similar elements to achieve similar task System is usable and learnable when similar concepts are expressed in similar ways: Eliminating confusing & reduce learning cost Enabling people to quickly transfer prior knowledge to new contexts and focus on relevant tasks -- easy to learn and remember! Aesthetic Style and appearance is repeated to enhance recognition, communicates membership and sets emotional tone Problems of Consistency: Repetitive Boring Monotonous Inconsistency With a Purpose Draw Attention The Sake of Usability

Norman: Constraint

- these are the things I can't do Relationship between actions and results in the world, between interface controls (their layout and movement) and their effect Restricting the possible actions that can be performed Helps prevent users from selecting incorrect options

Psychological Principles

1. Users see what they expect to see 2. Users have difficulty focusing on more than one activity at a time 3. It is easier to perceive a structured layout (Gestalt Theory) 4. It is easier to recognize something than recall it

Wearable computer

An electronic device capable of storing and processing data that is incorporated into a person's clothing or personal accessories Portable while remaining operational, thereby allowing a user to move and still operate the device Integrate sensors such as wireless communications, cameras, GPS, microphones and accelerometers as input devices to provide information about the close environment Communicate information to the user in a proactive way, thus conveying information to the user even when not being actively used Always being on and continuously receiving information about the surrounding environment

Form Entry:

Build user-friendly forms Communicate errors in real time Match the keyboard with the required text inputs Be responsive with visual feedback after significant actions Responsive Design: ~To make websites responsive to their environment ~Make pages that look great at any size

Gestalt Theory: Closure

Closure: A tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple individual elements.

When interaction design is done well, it...

Communicates to the user what functions are available, and allows them to infer how to interact with what they see→ visibility, affordance Allows the user to predict what's about to happen, be aware of what is happening now and understand what has just happened→ feedback Gives the user a clear sense of workflow - how many steps there may be, how long it may take and a general sense of their level of effort→ mapping Prevents users from making too many mistakes by providing smart defaults and appropriate visual design of UI controls→ constraint, consistency

Design principles for wearables: Tactile is important

Compared to smartphones, smartwatches have an advantage that makes tactile interaction just as important as visuals; we wear them Due to that direct contact with our bodies, vibrations can actually be much more communicative than visual alerts when designed properly

Gestalt Theory: Connectedness

Connectedness: Elements that are connected by uniform visual properties are perceived to be more related than elements that are not connected; Two basic strategies for applying uniform connectedness in a design: connecting lines and common regions

User Interface: Information Architecture

IA focuses on organizing, structuring, and labeling content in an effective and sustainable way to help users find information and complete tasks. Think about how the pieces fit together to create the larger picture, and how items relate to each other within the system Organization structures: How you categorize and structure information Navigation systems: How users browse or move through information Search systems: How users look for information

User Interface: Interaction Design

Interaction design Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Define how users can interact with the interface What can a user do with their mouse, finger, or stylus to directly interact with the interface? (e.g., buttons, drag & drop) Give users clues about behavior before actions are taken: affordance Does the appearance (color, shape, size, etc.) give the user a clue about how it may function? Anticipate and mitigate error: constraints Are there constraints put in place to help prevent errors? Consider system feedback and response time: feedback What feedback does a user get once an action is performed? Strategically think about each element: Fitts' Law Fitts's law predicts the amount of time taken to move to and select a target It is faster to hit larger targets close to you than smaller targets further from you Are the interface elements a reasonable size to interact with?

Design principles for wearables: Make it Glanceable

Make it Glanceable Users interact with it on the go Communicate that information clearly and without distraction Keep the app's snapshot up-to-date so that the Dock is always displaying current information Give user information directly from the watch face and use a custom notification interface to maximize the scan-ability of notification content.

Navigation and Exploration

Make navigation self evident Consistent throughout the app Mobile navigation should communicate the current location Organize and label menu categories to be user-friendly Allow users to "go back" easily in one step Provide text labels and visual keys to clarify visual information Create frictionless transitions between mobile apps and mobile web

Design Principles

Theoretical: User interface design knowledge from theory & experience Experiential: Abstract, high-level guides for design

Design principles for wearables: Size Matters

Obviously it is a smaller screen but what does that mean for the user? Harder to see and interact with The interaction should be effortless for the user which means a very clean, uncluttered design and when you use text it needs to be easily readable from an arm's length away The last thing you want is a user to have to put glasses on to use an app How many words can someone easily digest at that reasonable size?

2. Users have difficulty focusing on more than one activity at a time

Perceptual organization: Group things together (Proximity and Hierarchy)

It is easier to recognize something than to recall it

Recognition: knowledge in the world Recall: knowledge in the head As a designer, you should try to put the information that the user needs in the world (in the UI)!

Mobile UI Design Basics

Show the value of your app upfront. Get rid of anything that isn't absolutely necessary: reducing the clutter improves comprehension Rule of thumb: One primary action per screen Create a seamless experience: Responsive design Design controls based on hand position & finger-tap size Place top-level menu & frequently-used controls to the green zone: comfortably reached with one-thumb interactions Place negative actions (such as delete or erase) in the hard to reach red zone: to prevent accidentally tap them Design Finger-friendly Tap-targets Make interface elements clearly visible It's extremely important to have enough contrast on mobile: users might be outdoors with low contrast on the screen Minimize needs for typing Keep forms as short and simple as possible by removing any unnecessary fields Use auto-complete and personalized data where appropriate so that users only have to enter the bare minimum of information

Design principles for wearables: Balance Public and Private

Smartwatches are meant to be seen by others A device itself isn't private, the content on it often is Considerate default with opt for more privacy Notifications: buzz first, display second

Responsive vs. Adaptive

Start small (Mobile First) Make it modular Make it fluid, flexible Flexible Layouts Flexible Grid Fluid Images Always optimize

Why should designers care for Gestalt Principles

They'll help you determine which design elements are most effective in a given situation These principles hold the power to influence our visual perception, which allows designers to direct our attention to specific points of focus, get us to take specific actions, and create behavioral change At the highest level, the Gestalt Principles help you design products that solve the customer's problem or meet the user's need in a way that's beautiful, pleasing, and intuitive to use.