SunyoungKim,PhD Last class Normans design principles Recap. - - PowerPoint PPT Presentation

Human-Computer Interaction

• 18. Design – Mobile Design Principles

SunyoungKim,PhD

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 see it?
• 2. Feedback – what is it doing now?
• 3. Mapping – where am I and where can I go?
• 4. Affordance – how do I use 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. Input devices
• 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

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

• ne 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

Responsive design: examples

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

• 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

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

• 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?

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

Individual project (optional)

• I4. Wireframe and Flowchart

Among the sketches you created in the last assignment, you either pick some, combine some, or update some. And then, come up with a final set of wireframe with a flowchart. Wireframe

• Use a software of your choice.
• Recommended: Wireframe.cc https://wireframe.cc/
• Recommended: Balsamiq https://balsamiq.com/products/
• Recommended: Indigo studio

https://www.infragistics.com/products/indigo-studio

• Check for more:

http://mashable.com/2010/07/15/wireframing-tools/#oqegDW3EXZqq

• Do not apply colors
• Don't focus on the details, look & feel and visual details, but focus on

the content structure, workflow, and systems usability.

• I4. Wireframe and Flowchart

Flowchart

• Use a software of your choice
• Recommended: Powerpoint
• Recommended: https://www.draw.io/

Turn in: a PDF with

• Your project proposal on top
• A link to your website that has wireframes and a flowchart
• Wireframe of your entire system
• A flowchart
• Due by midnight 11/27

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

• I4. Wireframe and Flowchart

Indigo Studio

• You can get a free academic license to use it beyond the 30 day

trial using your Rutgers.edu email address to download and install you’re a Free 1-Year Academic License for Infragistics Indigo Studio here (http://www.infragistics.com/products/indigo-studio/ indigo-academic-license)

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

• I4. Wireframe and Flowchart

Rubric

• Wireframe (15pt)
• If the wireframe does not miss any screens that are important part of the

system (5pt)

• If each screen in the wireframe clearly demonstrates what it's about (5pt)
• If each screen has any usability problems (5pt)
• Workflow (5pt)
• If the workflow does not miss any steps that are important part of the

system (2pt)

• If the workflow clearly demonstrates how a user would navigate through a

system (2pt)

• If the workflow does not have any usability problem (1pt)

#Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.