user interface design process gabriel spitz. today understand the user interface design process ...
DESCRIPTION
Why a Design Process? Help focus us on Usability Criteria Ensure a systematic approach to the design effort Minimize reworkTRANSCRIPT
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