Scribd
Upload
2 views

Introduction to User Interface Experience-NewCh5 2

Uploaded by

omarahmad12318
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Introduction to User Interface Experience-NewCh5 2

Uploaded by

omarahmad12318
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

&

Dr Sultan M Al Khatib

1
Prototype

44
 “Transform your ideas into a physical form so that you can experience
and interact with them and, in the process, learn and develop more
Design Thinking empathy.”
 Paper Prototype

User – Centred
Design

(The process)
Prototype

45
Design Thinking  Low-fi Prototype

User – Centred
Design

(The process)
Prototype

46
 Hi-fi Prototypes

Design Thinking

User – Centred
Design

(The process)
Prototype

 Make interactive prototypes before it is developed. great tool: Invision

47
 A wireframe is a visual schematic, blueprint, or template of a
screen or Web page design in an interaction design.
Design Thinking
 Represent part of the workflow or each task sequence using click-
through prototypes. These page sequences can represent the flow
of user activity within a scenario.
User – Centred  Maps of screen or other state transitions during usage, depicting
Design envisioned task flows in terms of user actions on user interface
objects.
 Can be used for rapid and early lab-based evaluation by printing
(The process) and converting them into low-fidelity paper prototypes.
User Flow /  Can also be used for design walkthroughs and expert evaluations.

Wireframes  The goal is to enable a developer to implement the designs


without the need for any interpretation. It ca be accompanied by
high-fidelity visual components.

48
Design Thinking

User – Centred
Design

(The process)
User Flow /  everything the app and every page does
Wireframes  You don’t want to find out something is needed later
 blueprints

49
Design Thinking

User – Centred
Design

(The process)
User Flow /
Wireframes  Look at the app as a whole.
 Does everything make sense?

50
 Prioritize most
important
Best Practice activities/elements
“Less is More” Avoid
“Decision Fatigue”

Too many options! 51

You might also like