User Interface Design Process Gabriel Spitz. Today Understand the User Interface Design process ...

User Interface Design ProcessGabriel Spitz

Today

Understand the User Interface Design process Gather info for designing a user interface for

a vending machine Design the Interface

Why a Design Process?

Help focus us on Usability Criteria Ensure a systematic approach to the design effort Minimize rework

Usability Criteria

Efficiency Effectiveness Acceptance

Learnability Error/Safety Satisfaction

PerformanceSpeed Memorability Task completion

Usability of anapplication

UsabilityIndicators

Gabriel Spitz

4

Effective interaction is determined by and measured using Usability Indicators

Martijn van Welie (2001)

Usability Design Principles

Clarity-to avoid ambiguity. Through language, hierarchy, flow, visuals

Concision-to make interaction efficient Familiarity- to facilitate recall and use (to reduce anxiety with new) Responsiveness (not sluggish) - Speed and feedback Consistency - across applications to facilitate performance Aesthetic - to make it enjoyable when in use Efficiency - to help user be more productive Forgiveness

User-Interface design - Steps/Goals

UnderstandWhat is the problemwho are the users what do they do

Thinkhow will users work

in the future

Conceptualizethe user interface

and interaction

DesignAn aesthetically

pleasing and consistent interface

EvaluateIdeas,

concepts, designs

User Interface - Design Method

User interviews &

contextual observations

Task scenarios and walkthrough

Participatory design, Usability

principles, Design patterns

Graphical screen design

Usability Assessment

Understand

Understand – Objectives

Build an understanding of the design problem Identify the business problem that we intend to solve Describe the users; what are their characteristics, likes,

dislikes, goals and needs Describe how and where we expect users to use the

product/application

Understand– Methods

Meet with Product team and identify the design problem, scope, and goals of the product

Meet actual and/or virtual users to figure out who they are, what they do, how do they do it today and what are their key needs

Identify Perform a competitive analysis of similar products or solutions to identify trends and benchmark what is out there

Think

Think

While I call out “Thinking” as a separate step, it is often integrated with the Conceptualized step

Design Think and Think Design We use images to stimulate and guide thinking and we

use thinking to guide the design

Conceptualize

Conceptualize – Objective

Build a clear and shared vision of the product or application we want to build Depict how the user interface will appear to users Help ensure that key user tasks are accounted for-

generate additional use stories and modify the design Select and wireframe the most suitable design ( one that

meets most of the requirements)

Conceptualize – Deliverables

Establish an overall conceptual model and sketches of the solution – the overall pattern, interaction style, metaphors

Create Task Model to describe the interaction

Create Page-wireframes to describe the interface (dialogue) concept

Create and review Application-wireframe to tie the interaction and interface design together within the context of user intention

Add new use stories, if needed, to ensure effective and comprehensive design

Low Resolution Wireframe

Wireframes

Visual Design

Visual Design

Create a compliant and aesthetically pleasing rendering of the application wireframes

Ensure clarity and simplicity at the user interface Help new users quickly master product usage by

adding guidance and instruction where needed

Visual design

Evaluate

Evaluate

Provide constructive and actionable input to specific design questions/issues

Continuously verify proposed design solutions Ensure usability both at the micro and macro level

Evaluate - Methods/How

Utilizing a mix of evaluation methods including: User interviews Local and remote usability tests A/B testing compering design alternatives On-line surveys

Design of a Vending AppDevelop an Understanding

Design Problem

Many Vending Machine Banks around campus serving a variety of products

Currently most of these machines require “Cash on Delivery”

In the future these machines will be able to communicate with a user via smart phones or tablet computers.

Our goal - build a tablet based user interface to shop at these vending machines.

Starting the UI Design Process

Requirements - before we Design

Users Payment details Set of products Functionality Advantages/Disadvantages Platform - Hardware

Developing an Understanding

Who are the Users

Where will this application be used Environment

What Tasks will this application need to support What are the Usability Goals which will make this

application successful from a user perspective What will make this application a business success -

Business goals

Who are the Users

Users

Who Are the Users

Students Faculty / staff Visitors Special needs

Use Environment

Use Environment

Use Environment

Hall ways and lounges Often noisy with lots of people talking and laughing People come, go, stand

Some people might be embarrassed about what they buy

Several individuals might wait in line for vending machine

User Tasks

User Tasks

User Journey

Setup Arrive Shop Buy

Pickup Complete Request help

Major Steps of the interaction

User Tasks (1/2) After purchasing the App

Setup app – Personal/financial info When arriving to the Vending area

System Locate application – Like finding a network on the lap top User sign in - passcode

Ready to shop Browse available items – Orientation and promotions View Favorites – system will build up based on repeated purchases Locate candidate item

Categories Price Names + Images

Search for a specific item Interrogate system to obtain additional item info View cart status – items, cost Select item

User Tasks (2/2)

Ready to buy Review cart status Edit cart content Buy

Ready to pickup items Be directed to the specific vending machine that

contain my items Close transaction

Opportunity for feedback Auto close

Usability Goals

Usability Goals

Usability Goals Promote user trust

About personal info About fiscal info

Minimal data input Amount of data Number of steps

Support decision making Possibly show items I bought in the past Provide relevant info for decision making – e.g., dietary,

allergic Keep user in control

Ability to add delete Feedback about item status, cost

Business Goals

Business goals

Business goals

Sell products Minimize cart abandonment Increase average cart value Build long term relationship with customers –

Return customers Obtain payment Engender trust Minimal support needs

Other Potential Requirements Localization

Multiple languages Different currencies

Accessibility by individuals with special needs Online help

For first time users For issues

How to contact us