Human-Computer Interaction 12. Design Principles (3) Last class - - PowerPoint PPT Presentation

Human-Computer Interaction

• 12. Design Principles (3)

Last class

Norman’s design principles

• Recap. Usability

Usability is a measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment - ISO 9024

Usability is NOT identical to making things simple to use!!!

• Recap. Norman’s 6 design principles

1. Visibility – can I find what to do? 2. Feedback – what is it doing now? 3. Mapping – where am I and where can I go? 4. Affordance – how do I do it? 5. Constraint – these are the things I can’t do 6. Consistency – I think I have seen this before

Today’s lecture

• 1. UI Design basics
• 2. Mobile UI design principles
• 3. Responsive design
• 4. Wearables

UI Design Basics

UI brings together concepts from:

1. Interaction design 2. Visual design 3. Information architecture

• 1. Interaction design

Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Questions to consider when designing for interaction:

1. Define how users can interact with the interface in general

• What can a user do with their mouse, finger, or stylus to directly interact

with the interface? (e.g., buttons, drag&drop)

• What commands can a user give, that aren’t directly a part of the product,

to interact with it? (e.g.., when a user hits “Ctrl+C”, they expect to be able to copy a piece of content; when a user hits “Enter”, they expect for a form to be submitted)

• 1. Interaction design

Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Questions to consider when designing for interaction:

1. Define how users can interact with the interface in general 2. 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?

• What information do you provide to let a user know what will happen

before they perform an action? (e.g., label on a button, instructions before a final submission, etc.)

• 1. Interaction design

Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Questions to consider when designing for interaction:

1. Define how users can interact with the interface in general 2. Give users clues about behavior before actions are taken 3. Anticipate and mitigate error: constraints

• Are there constraints put in place to help prevent errors?
• Do error messages provide a way for the user to correct the problem or

explain why the error occurred?

• 1. Interaction design

Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Questions to consider when designing for interaction:

1. Define how users can interact with the interface in general 2. Give users clues about behavior before actions are taken 3. Anticipate and mitigate error 4. Consider system feedback and response time: feedback

• What feedback does a user get once an action is performed?
• How long between an action and a product’s response time?

• 1. Interaction design

Interaction design focuses on creating engaging interfaces with well thought-out behaviors. Questions to consider when designing for interaction:

1. Define how users can interact with the interface in general 2. Give users clues about behavior before actions are taken 3. Anticipate and mitigate error 4. Consider system feedback and response time 5. Strategically think about each element: Fitts’ Law

• Are the interface elements a reasonable size to interact with?
• Are edges and corners strategically being used to locate interactive elements like

menus?

• 2. 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

• 2. 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.

• 2. Visual design: visual path

• 2. Visual design: visual path

1. Color: Use one to two colors that will serve as a visual path. 2. Type: Use consistent font style, color, and behaviors to allow users to quickly scan the page. 3. Grid and shapes: Use modular grid systems supported by negative space for well balanced and organized design.

• 2. Visual design: visual path

• 2. Visual design: visual path

• 3. 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

Mobile UI Design Basics

1. 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

Overall

Overall

• 2. Create a seamless experience: Responsive design

• 3. 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

Overall

• 4. 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

Overall

• 5. 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

Overall

• 1. Make navigation self evident
• Consistent throughout the app
• Mobile navigation should

communicate the current location.

Navigation and Exploration

• 2. Organize and label menu categories to be user-friendly

Navigation and Exploration

• 3. Allow users to "go back" easily in one step

Navigation and Exploration

• 4. Provide text labels and visual keys to clarify visual information

Navigation and Exploration

• 5. Create frictionless transitions between mobile apps and mobile web

Navigation and Exploration

• 1. Build user-friendly forms

Form entry

• 2. Communicate errors in real time

Form entry

• 3. Match the keyboard with the required text inputs

Form entry

• 4. Be responsive with visual feedback after significant actions

Form entry

Summary: Mobile UI design principles

1. Overall

1) Show the value of your app upfront 2) Create a seamless experience 3) Design controls based on hand position & finger-tap size 4) Make interface elements clearly visible 5) Minimize needs for typing

• 2. Navigation and exploration

1) Make navigation self evident 2) Organize and label menu categories to be user-friendly 3) Allow users to "go back" easily in one step 4) Provide text labels and visual keys to clarify visual information 5) Create frictionless transitions between mobile apps & mobile web

• 3. Form entry

1) Build user-friendly forms 2) Communicate form errors in real time 3) Match the keyboard with the required text inputs 4) Be responsive with visual feedback after significant actions

Responsive Design

Responsive design

• To make websites responsive to their environment
• Make pages that look great at any size

Responsive vs. Adaptive

Responsive design

Responsive design

(1) Mobile first

(2) Modular contents

(3) Flexible & fluid contents

(4) Fluid image

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

*Best practices are still emerging!

Responsive design

See more: http://www.awwwards.com/websites/responsive-design/

Responsive design: examples

Wearable

First wearable computer?

Xerox Star (1981)

An electronic device capable of storing and processing data that is incorporated into a person's clothing or personal accessories

Wearable computer

Steven K. Roberts: Steven K. Roberts: type while riding the bicycle Steve Mann: using apps while walking around

Wearable Computing, MIT 1993 earable Computing, MIT 1993

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

• How many words can someone easily digest at that reasonable size?

Design principles for wearables

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.

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

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.

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

Design principles for wearables

Next week: Visual Components

• Quiz #3 on 4/9
• P3. Wireframe due on 4/9

Next Class