user interface design process
DESCRIPTION
User Interface Design Process. Gabriel Spitz. User-Interface design Steps/ Goals. Understand who are the users and what do they do. Articulate how will users work in the future. Evaluate Ideas, concepts, designs. Design An aesthetically pleasing and consistent interface. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/1.jpg)
User Interface Design ProcessGabriel Spitz
![Page 2: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/2.jpg)
User-Interface design Steps/Goals
Understandwho are the users
and what do they do
Articulatehow will users work
in the future
Conceptualizethe user interface
and interaction
DesignAn aesthetically
pleasing and consistent interface
EvaluateIdeas,
concepts, designs
![Page 3: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/3.jpg)
User Interface Design Method
User interviews &
contextual observations
Task scenarios and walkthrough
Participatory design, Usability
principles, Design patterns
Graphical screen design
Usability Assessment
![Page 4: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/4.jpg)
User Interface Design Deliverables
User and Task Description
Workflow and User journey Map
Interface and interaction
Wireframes & prototypes
Visual Design comps
DesignVerification
![Page 5: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/5.jpg)
Articulate
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
![Page 6: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/6.jpg)
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
![Page 7: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/7.jpg)
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
![Page 8: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/8.jpg)
Understand– Deliverables
User Persona User Journey Map – The set of activities and tasks
users currently perform User Experience Map
User Persona User Journey Map User Experience Map
![Page 9: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/9.jpg)
Interaction Hierarchy
Activities
Tasks
Steps
UI Components
![Page 10: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/10.jpg)
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)
![Page 11: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/11.jpg)
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
![Page 12: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/12.jpg)
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
![Page 13: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/13.jpg)
Use Stories Table (Task Identification)
![Page 14: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/14.jpg)
Low Resolution Wireframe
![Page 15: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/15.jpg)
Wireframes
![Page 16: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/16.jpg)
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
![Page 17: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/17.jpg)
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
![Page 18: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/18.jpg)
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
![Page 19: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/19.jpg)
Visual design
![Page 20: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/20.jpg)
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
![Page 21: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/21.jpg)
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
![Page 22: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/22.jpg)
Evaluate – Deliverables
Test results Proposed areas in need for improvements Rational and prioritization for proposed change
Usability Assessment Report
![Page 23: User Interface Design Process](https://reader036.vdocuments.net/reader036/viewer/2022062222/56816421550346895dd5e233/html5/thumbnails/23.jpg)
Initial Implementation