User Interface Design ProcessLecture # 6
CS 615 - Structure
Understand the User Interface
Design the User Interface Evaluate the User 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)
User-Interface design - Steps/Goals
UnderstandWhat is the problem
who are the users what do they doWhat is needed
Articulatehow 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, Competitive
Analysis
Task scenarios and walkthrough
Participatory design, Usability
principles, Design patterns
Graphical screen design
Usability Assessment
User Interface - Design Deliverables
Requirements -User and Task Description
Workflow and User journey Map
Interface and interaction
Wireframes & prototypes
Visual Design comps
DesignVerification
Understand – Objectives
Build an understanding of the design problem and Requirements Business problem – To identify what we are trying to
solve User Characteristics - What are they like, what do they
want, try to avoid, goals and needs Use Environment - Where will users use the
product/application
Understand– Methods
Interview Product Manager - To identify the design problem, scope, and goals of the product
Interview Users – To figure out who they are, what they do, how do they do it today and what are their key needs
Perform a competitive analysis - To identify trends and benchmark what is out there
Understand– Deliverables
Requirements Document – What is needed
User Persona – Characteristics and demographics of our users
User Journey Map – The set of activities and tasks users currently perform
User Persona User Journey Map
Articulate
Envision the Future – How will people use our application or product While I call out “Articulate” 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 – 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
Conceptual model and sketches - of the solution – the overall pattern, interaction style, metaphors
Task Model – That describe the interaction
Wireframe – That describes the interface (dialogue) concept at the page level
Application-wireframe – That 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
Conceptualize – Deliverables
Task flow model
Application level – Sketches and Wireframe describing in detail; Navigation, structure of each interface component, and the expected interaction within the context of specific user intentions
Task Flow Model Navigation Map Interface and InteractionWireframes
Use Story Table (Task Identification)
Low Resolution Wireframe
Wireframes
Design – Objective/Why
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
Design – Methods
Review research and conceptual design to understand goals, intent, and proposed design
Skin each wireframe component to comply with corporate guidelines
Identify and design special components required by the design – e.g., icons, special labels, highlight colors, etc.
Review the visuals with UX and Documentation
Design – Deliverables
Clear, aesthetic and pixel perfect visual design
Implementation guidance and specific components (such as icons) to support front end developers
User guides, help documentation and training
Visual Design User Guidance
Visual design
Evaluate - Objective/Why
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
Evaluate – Deliverables
Test results
Proposed areas in need for improvements
Rational and prioritization for proposed change
Usability Assessment Report
Initial Implementation