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