Slides from my talk at the Nasscom event in Pune, on September 24th, 2014.

1. USER EXPERIENCE &
PROTOTYPING
Integra(ng Design & Product Development
Pune, September 24th, 2014
KshiBz Anand
Professor (Design), InsBtute of Product Leadership

2. Hello, I am @kshiBz
Presently
Dean & Director -­‐ India OperaBons at L'École de Design Nantes Atlan(que
Professor (Design) -­‐ Ins(tute of Product Leadership
Founder & Principal Designer -­‐ Happy Horizons Consul(ng
Previous
Design Head, Kuliza Technologies
Founder & Director, Deskala Research and Design & Consul(ng
Designer @Motorola, Infosys
EducaBon
MS in HCI Design , Indiana University Bloomington, USA
BDes in CommunicaBon Design, IIT Guwaha(, India
Contact
kshiBz@happyhorizons.in
Twi[er: @kshiBz
LinkedIn: in.linkedin.com/in/kshiBzanand/
Website: www.kshiBzanand.com

3. Are you a designer?

4. Design is such a natural human ability
that almost everyone is designing most of the
time - whether they are conscious of it, or not.
- Harold Nelson, Erik Stolterman, in ‘The Design Way’

5. The best designs are the ones that do not need a
separate user manual !

6. We live in interesBng Bmes!
According to the 2011 Census, 46.9% Indians do not have
toilets at home, while 63.2% have landlines or mobiles.
53.2% own mobile phones.

7. Show ConnecBng Film (18 mins) hZp://youtu.be/lciYKwVLTuk

8. Mobile has made us …… ?

9. How many of you have a
smartphone?

10. Does it delight you?

11. 1993
2014

12. Where did we come from?
Where do we go?

13. Then Now

14. To have a good
User experience
is to Delight!

15. Delight = Features ?

16. Design should solve problems
for your business by solving
problems for your user
-­‐ Laura Klein

18. Reference: Putting people together to create new products; Jonathan Korman
http://www.cooper.com/journal/2001/10/putting_people_together_to_cre.html
Key to Product Success

19. A requirement is short statement
of the problem
A specificaBon is how to solve
the problem
* Source: On Reqs and Specs: The Roles and Behaviors for Effective Product Definition
http://www.pragmaticmarketing.com/publications/topics/09/on-reqs-and-specs
ProductManagement
Engineering
UX
WHAT HOW
Sweet spot
Requirements vs. specificaBons

20. How much of UX should a Product
Manager know?
Reference:
h*p://boxesandarrows.com/transi8oning-­‐from-­‐user-­‐experience-­‐to-­‐product-­‐management/

21. Are usually
Business-­‐centered
Are usually
User-centered

22. Design for
people,
emoBons, behaviors.
Do not
design for
technology.

25. VISCERAL
BEHAVIORAL
REFLECTIVE
A more detailed look and feel and function that is got by interactions
i.e. the total experience of using a product
Refers primarily to that initial impact, to its appearance
Appearance is rooted in form, aesthetics
Ones thoughts afterwards, how it makes one feel, the image it
portrays, the message it tells others about the owner's taste

26. Time
spent
Interac8on
VISCERAL
BEHAVIORAL
REFLECTIVE

27. Products were once designed for the functions they performed.
But when all companies can make products that perform their
functions equally well, the distinctive advantage goes to those
who provide pleasure and enjoyment while maintaining the
power. If functions are equated with cognition, pleasure is
equated with emotion; today we want products that appeal to
both cognition and emotion.
– Don Norman

28. Internet users per 100 inhabitants
Reference
:
h*p://en.wikipedia.org/wiki/File:Internet_users_per_100_inhabitants_ITU.svg
Importance Of UX Today

30. Reference:
h*p://wearesocial.net/

32. Reference:
h*p://scoop.intel.com/celebra8ng-­‐interna8onal-­‐internet-­‐of-­‐things-­‐day/

33. User Experience Google Trends

34. USER EXPERIENCE
DELIVERING
DELIGHT
SINCE MID 90s
CUSTOMER

35. h*p://www.stephenthomas.com/about/images/what_is_ux.jpg

36. Unclear boundaries

37. T shaped (UX) professional

38. PETER
MORVILLE’S
HONEYCOMB
MODEL
Image
Source:
h*p://seman8cstudios.com/publica8ons/seman8cs/000029.php
The goal of UX

39. UX is a team effort

41. UX Process

42. Reference:
h*p://www.thinkbrownstone.com/design-­‐process/
UX Design Process

43. Research à Ideate à Prototype à Evaluate Feedback à Release
UX Design Process

44. RESEARCH à discovery the ways of knowing
IDEATE à conceptualizaBons, features
funcBonaliBes
PROTOTYPE à get your hands dirty, bringing the
ideas to life
EVALUATE ITERATE à gather feedback
RELEASE à launch , deliver for development
Steps in UX Design Process

45. Companies Customize the design process

47. Comparing UX Process

48. HOW DO YOU FIT UX
INTO YOUR
ORGANISATION?

49. The elements of
user experience design

51. Just remember this

52. The UX role Shim
FROM AESTHETICS
TO PROCESS
TO PRODUCTS
TO SERVICE
TO STRATEGY

53. The product is no longer the basis
of value. The experience is.

54. Design is the conscious effort to impose a meaningful
order. -­‐ Victor Papanek

55. ACTIVITY :
Deconstruc*ng the UX
Exercise
(10 mins)

56. The UX of Angry Birds –
what makes it successful ?

57. “The”
experience
An
experience
An
experience
An
experience
An
experience
An
experience
An
experienceAn
experience
An
experience
John Dewey
American Educator
Philosopher

58. The mistakes we make!
² Most experiences are inchoate and not
thought through
² They are unfulfilled as they get interrupted
² FrustraBng and not significant and leads to
an unpleasant experience

59. THE AESTHETIC :
the “look and feel”
THE INTELLECTUAL :
business strategy
THE PRACTICAL:
what user actually
interacts with and
experiences and its
performance
+
+
MulBple things have to come together
to create the experience

61. Take a break!

63. Somware (products) should
behave like a considerate
human being!
What does being considerate
mean?

64. • Take an interest in user’s actions
• Are differential
• Are forthcoming
• Anticipate people’s needs
• Are conscientious
• Don’t burden you with extra information
• Keep you informed
• Are perceptive
• Don’t ask you a lot of questions
• Take responsibility
• Know when to bend the rules
• GIVES A GOOD USER EXPERIENCE
CONSIDERATE PRODUCTS

65. Show
Pomegranate
Phone
video

66. UX could be
different across
plaoorms.
How ?
Mac OS vs Windows
Desktops vs Tablet vs mobile
iOS vs Android vs Windows

67. Plaoorms and their experiences differ

68. Think of a product that
delighted you (or did
not) ?
Why so?
(THAT YOU USE REGULARLY)

69. USER RESEARCH
Why is it important ?
How do we do it ?

71. QUESTION THE STATUS QUO
Fly on the wall Observa(on

72. What does this image say ?

73. Design interven(ons in daily life
ANALYSING USAGE CONTEXT

74. UNDERSTANDING USER GROUPS
Crea(on of Personas

75. WHAT IS A PERSONA?
WHY PERSONAS ARE
IMPORTANT?

76. PERSONAS
• A representation of the goals and behavior of
a real user group.
• They are captured in a range of formats
(depending on the requirements of the client)
that typically include behavior patterns, goals,
skills, attitudes, and environment; with a few
fictional personal details to bring the persona
to life.

77. • Giving a face to your users
• Helps in generating Use Cases
• Helpful for Scenario Generation
• Scenarios gives insights
WHY PERSONAS ARE
IMPORTANT?

79. Ac(vity: Finding Primary, Secondary user groups
STAKEHOLDER MAPPING

80. Mapping your stakeholders

81. Ac(vity: Experiencing what personas feel, do, see, hear
EMPATHY MAPPING

83. Research is
important for the
success of any
design

85. • On Location User Research
– Actual User Interviews
– Studying User environments
– Contextual Inquiries
• Remote User Research
– Questionnaire
– Surveys
– Telephonic Interviews
– Video recordings of users performing their
tasks
User Research Techniques

86. When do you use
what kind of User
Research Method ?
Discussion

87. ACTIVITY
Wallet Mapping Exercise
(20 mins)

89. –Laura
Klein,
Author
of
UX
for
Lean
Startups
QuanBtaBve research tells you
WHAT your problem is.
QualitaBve research tells you WHY
you have that problem.

90. User Based Research
Qualita5ve:
Lesser
number
of
par?cipants
Quan5ta5ve:
Higher
number
of
par?cipants

91. Popular User Research Techniques

92. Popular User Research Techniques

93. TOOLS FOR USER RESEARCH TESTING
h*p://uxdesign.cc/ux-­‐tools/

94. It would get people finally noticing design - because when design's working properly,
you don't notice it.

95. PROTOTYPES
The real thing in UX!

97. The 4 dimensions
of Prototyping

98. 1. Representation
à Describes the form of the
prototype, e.g., sets of paper
sketches or computer
simulations

99. 2. Precision
à Describes the level of detail
at which the prototype is to be
evaluated; e.g., informal and
rough or highly polished

100. 3. Interactivity
à Describes the extent to
which the user can actually
interact with the prototype;
e.g., watch-only or fully
interactive

101. 4. Evolution
à Describes the expected life-
cycle of the prototype

102. WHY PROTOTYPE?
Reference:
h*p://designinstruct.com/web-­‐design/prototyping-­‐is-­‐essen8al/

103. Find Design issues early

104. Iterate more quickly on a design concept

105. Compare design variaBons quickly

106. Reference:
h*p://refereemindset.com/give-­‐feedback
Gather design feedback be[er

107. Use prototypes as a presentaBon tool

108. à FAST
à EASY
à GETS STAKEHOLDERS INVOLVED SOONER
à SAVES MONEY

109. If a picture is worth 1000 words,
a prototype is worth 1000 meetings!

110. WHAT ARE THE DIFFERENT
WAYS TO PROTOTYPE?

111. Reference:
h*p://www.slideshare.net/visualrinse/prototyping-­‐23421094

112. We will never all agree on what “design” is. But we can probably
agree that sketching is an archetypal activity associated with
design!

113. VariaBons in elements and style in prototyping

114. Reference:
h*p://www.usability.gov/how-­‐to-­‐and-­‐tools/methods/prototyping.html
Tracy Lepore, from Ideation towards Usability

117. ©
Bill
Buxton,
Sketching
the
User
Experience
h*p://www.cs.cmu.edu/~bam/uicourse/Buxton-­‐SketchesPrototypes.pdf
Getting the term right

119. Stages of prototyping in Product
Design Engineering
Sketch à Earlier stage à Lesser cost à More reviewed
Prototype à Later Stage à Larger cost à More acceptance

120. Before making the Prototype ask this:
1. What needs to be real
2. What can we fake?
3. Where will they use it?
4. How will the interface work ?
5. Will the users understand where to click next?
6. Have I covered all possible user pathways?

121. Watch
Google
Glass
Prototyping
VIDEO
:
h*ps://www.youtube.com/watch?v=d5_h1VuwD6g

122. Discussion: would you prototype this differently ?

123. GESTALT’S THEORY :
How the mind
organizes and perceives
Visual InformaBon

125. • Gestalt theory focuses on the mind’s
perceptive processes
• The word Gestalt has no direct translation
in English
•
• It refers to a way a thing has been gestellt ;
i.e., ‘placed,’ or ‘put together”
• Common translations include form and
shape

126. Gestalt psychologists are interested in the way
that, within a world of ongoing change and
endless variety, people can make sense of so
much visual stimuli
(Schamber, 1986)

127. Characters,
punctuation
Words,
numbers
Sentences,
paragraphs
Story
Points,
lines,
shapes
Type,
pictures,
space
Layout
DESIGN
Component
Vocabulary
Syntax
Message
VERBAL VISUAL
Adapted
from
Schamber,
1986

128. The whole is greater than the sum of it’s parts

130. What did you see first here?

131. • Law of Similarity / Anamoly
– Similarity occurs when objects look similar
to one another. People often perceive
them as a group or pattern.
Gestalt’s principles
Anomaly uses the principle of similarity
but alters one figure to draw attention to
difference.

132. The
eye
differen?ates
an
object
from
its
surrounding
area.
A
form,
silhoueMe,
or
shape
is
naturally
perceived
as
figure
(object),
while
the
surrounding
area
is
perceived
as
ground
(background).
The
dark
background
encourages
your
eye
to
see
the
square
as
an
opening.
Gestalt’s principles
• Figure and Ground

133. Effec?ve
figure/ground
rela?onship.
Compe?ng
figure/ground
rela?onship.

134. Image
placement
can
also
create
depth
as
in
this
flyer.
So
much
centered
text,
however,
is
difficult
to
read.
Limit
centered
text
to
major
?tles.
Use
the
principle
of
proximity
and
alignment
for
other
textual
informa?on.

135. Gestalt’s principles
• Law of Proximity
– Proximity occurs when elements are
placed close together. They tend to be
perceived as a group.
Proximity
overpowers
similarity
in
color/contrast

139. Gestalt’s principles
• Law of Closure
– Closure occurs when an object is incomplete
or a space is not completely enclosed. If
enough of the shape is indicated, people
perceive the whole by filling in the missing
information.

140. Closure
can
also
be
used
to
reinforce
a
concept
in
a
clever
way.
No?ce
how
the
brand
“Spartan”
is
presented
in
the
graphic
as
both
a
Greek
warrior,
complete
with
helmet,
and
a
man
swinging
a
golf
club.

141. Gestalt’s principles
• Law of Continuity
– Continuation occurs when the eye is
compelled to move through one object and
continue to another object.

144. Understanding Visual Hierarchy
When we look at visual information, we look for hierarchy
because it helps us sort what is most important.
The size of objects, shape, and color, and placement provide
cues that help us notice those things that are most important
and others that are supplemental.
Which circle did you notice first? Which one draws your attention
more?
What conclusions can you draw based on your response to the
two circles?

145. We also look for patterns as well as similarity and
difference to make sense of what we are seeing.
Most of us will view the square as more important than the circles.
The focal point in a design governs the visual hierarchy and should draw
the viewers interest while it also helps them understand what they are
looking at.

146. The focal point in this data-driven infographic is the large image of corn.
Notice how the designer applied principles of alignment and proximity for
text and other supporting images.

147. Crea?ve
thought
Gestalt
laws
Good
design

148. What are some ways you can
create Visual Hierarchy in
interfaces?

149. à Foreground – background
à Highlights
à Playing with color
à Font sizes
à Font emphasis
à Font family
à Contrast between different elements

150. GRIDS
-­‐ soul and skeleton of
good design

151. More about GRIDS
• Optimum – Designing with the 960 Grid
System for the most commonly used
1024x768 screen resolution
• Grids divide the screen into areas
• All spacing becomes multiple of the
smallest spacing between elements
• Enhances Consistency of screens
• Standardizations reduces design time

154. The value of typography

156. Can you tell Arial from HelveBca?

166.
Limit the Number of Fonts to Two:
One for headings and one for text copy.
KEEP IT SIMPLE

167. What are the popular UI
mistakes that people make ?
Discussion

168. The Basics to remember
• Building Prototypes should be Easy
• Prototypes should not need to be pixel perfect
• The goals need to be clearly spelled out prior to
creaBon
• Build prototypes that have an output that everyone
can see
• Do not complicate things
• Create flows / sketches on paper first

169. 7 Easy to remember
User Interface rules

170. 1. Law of Clarity

171. 2. Law of preferred acBon

172. 3. Law of context

173. 4. Law of defaults

174. 5. Law of Guided AcBon

175. 6. Law of feedback

176. 7. Law of easing

177. REMEMBER
à Place users in control of the interface
à Reduce users’ memory load
à Make the user interface consistent.

178. 5 Prevalent Pitfalls
when Prototyping
Prototypes are a fabulous way to explore ideas with a team.
They shorten the time between “This is what we’re thinking...” and “Oh, I get it.”

179. #1: Focus on the Deliverable, not on the Learning
#2: Too Much Converging; Not Enough Diverging
#3: Working in the Wrong Fidelity
#4: Too Li[le EvaluaBng
#5: FixaBng On A Single Prototyping Tool

180. “It's really hard to design products by focus group.
A lot of times, people don't know what they want until
you show it to them.”
-Steve Jobs

181. VISUAL DESIGN
What most people
think
(UX) Design is !

182. Visual
Design
Last
in
First
Out
User
Experience
The
whole
process

183. People want
Visual Design
but ask for UX

184. But by then its
too late !

185. The basics of Color

188. KEEP IT SIMPLE
Dark font, light background.
Light font, dark background.
Color
Difference:
The
red
and
blue
colors
have
the
same
value,
and
the
effect
is
jarring
to
the
eyes.
The
text
seems
to
vibrate.
Color
Value:
Same
color
in
the
background
and
text,
but
the
values
are
different,
so
it
does
not
vibrate
but
creates
an
easy
to
read
text.

189. POPULAR DESIGN TRENDS

190. 2014 Web Design Trends
Reference:
h*p://www.pinterest.com/melissacales/2014-­‐design-­‐trends/

191. Reference:
h*ps://econsultancy.com/blog/64096-­‐18-­‐pivotal-­‐web-­‐design-­‐trends-­‐for-­‐2014
Flat UI

192. MicrointeracBons / UX

193. Less text

194. Minimalist NavigaBon

195. Richer Content experiences

196. Making full use of one page

197. MonochromaBc Designs

198. Bold Colors

199. Tile / App style UI

200. Larger Images

201. Increased use of typography info-­‐graphics

202. Fixed posiBon navigaBon menus

203. Video in the background
Reference:
h*p://www.fastcodesign.com/3028471/google-­‐ventures-­‐your-­‐design-­‐team-­‐
needs-­‐a-­‐war-­‐room-­‐heres-­‐how-­‐to-­‐set-­‐one-­‐up

204. Reference:
h*p://www.slideshare.net/goldengekko/mobile-­‐apps-­‐design-­‐trends-­‐2014

215. Prototyping tools

216. Reference:
h*ps://hackdesign.org/toolkit/rapid-­‐prototyping

217. Reference:
h*ps://hackdesign.org/toolkit/rapid-­‐prototyping

218. Reference:
h*ps://hackdesign.org/toolkit/rapid-­‐prototyping

219. BALSAMIQ
• Good repository of UI elements
• Almost all popular UI elements used
• Highly collaborative
• Make it interactive

223. ….
and
then
you
just
Play
J

226. Idea
Tool/
PPT
/
Balsamiq
HTML
/
CSS
CODE

227. iOS UI Style Guide
• hZps://developer.apple.com/library/ios/documenta(on/userexperience/conceptual/MobileHIG/index.html

228. Android UI Pa[erns

229. Android InteracBon Pa[erns

230. Android InteracBon Pa[erns

231. Windows apps UX Guidelines
Reference:
h*p://msdn.microsoe.com/en-­‐us/library/windows/apps/hh465424.aspx

232. Take a break

233. Afternoon working session

234. Reference:
h*p://www.ndtv.com/ar8cle/india/india-­‐is-­‐world-­‐s-­‐coronary-­‐diabe8c-­‐capital-­‐says-­‐expert-­‐447189
The problem at hand

235. Today’s class Design Challenge

236. • With the Internet of Things gexng larger day by day, our lives
are more connected than ever. It is not just about people, but
also our devices that are connected. This has resulted in
change in user behavior and with changing lifestyles comes
diseases and health problems that were not heard of before.
• The consumers on the other side are more aware about
healthcare and are doing various things in different capaciBes
to keep track of their health and wellbeing.
• Healthcare professionals and informaBon is more accessible
today.
• Insurance companies are cashing onto this phenomenon as
well.
• With the advent of smart devices, healthcare is finally
becoming a buzzword, but something that needs our most
a[enBon.
Your role as a product designer is to help consumers use a tablet or
phone app that helps in beZer healthcare management.
Design of Healthcare App

237. TODAY’s UX DESIGN CHALLENGE
Design of naBve app for managing healthcare
for Indians
Things to do
• Map out your system, define your focus area
• Define your User Group
• Do Interviews of Actual Users
• Create InformaBon Architecture
• Create Wireframes
• Make paper prototypes
• Refine design concept
• Present before class

238. How is MOBILE UX
different?
Would there be a difference in the
approach to UX on the Mobile
websites and Mobile apps ?
Your Opinion?

239. MOBILE FIRST
What are the advantages and
disadvantages of it ?
DISCUSSION

240. Graceful DegradaBon vs. Progressive Enhancement
or

241. What does Mobile Device mean?
A mobile device is a handheld tablet or other device
that is made for portability, and is therefore both
compact and lightweight. New data storage,
processing and display technologies have allowed
these small devices to do nearly anything that had
previously been tradi(onally done with larger
personal computers.

242. MOBILE FIRST
PRINCIPLES
Towards beHer User Experience

243. Make best use of screen real estate
Image
:
h*ps://www.flickr.com/photos/sierragoddess/5435989568

244. PrioriBze your informaBon and acBons
Image
:
h*ps://www.flickr.com/photos/johanl/5547851770

245. Design for scalability
Image:
h*ps://www.flickr.com/photos/sierragoddess/5435989568

246. Image:
h*ps://www.flickr.com/photos/koalazymonkey/2626094585
Giving ParBal a[enBon vs full a[enBon

247. Image
:
h*ps://www.flickr.com/photos/29881930@N00/2086642736
Use task-­‐based design

248. Design for interrupBon when a task
has to be abandoned midway
Image:
h*ps://www.flickr.com/photos/whiteafrican/2911951329

249. Image:
h*ps://www.flickr.com/photos/epsos/3842690051
Design by understanding hardware
and plaoorms capability

250. Image:
h*ps://www.flickr.com/photos/osde-­‐info/763025492
Screen size implies a user’s state.
User’s state infers their commitment
to what is on the screen

251. Image:
h*ps://www.flickr.com/photos/skohlmann/14772342171
IdenBfy your users well. Users have a
personal relaBonship with mobile!

254. Good design or Bad design ?

255. Reference
:
h*p://uxmag.com/ar8cles/avoiding-­‐featuri8s-­‐in-­‐the-­‐connected-­‐car-­‐gold-­‐rush

257. SYSTEM MAPPING
CLASS ACTIVITY:
Put down everything that comes to your
mind when you think of the word
‘healthcare’
System comprises of context, products,
stakeholders
Write down any dependencies if applicable
10
mins

258. Framing your research quesBons
the 5Ws and 1 H

259. Digital NaBves
Vs
Digital Immigrants

260. • Nearly all Digital NaBves possess a phone and a computer
• They use their phones conBnuously during the day
• 100% have a mobile phone and 89% of those are
smartphones
• Digital NaBves spend an average of 3.5 hours per-­‐day
using their phones
• 80% say they can’t stand a single day without the Internet
• On average, they spend two hours per day surfing the
Internet
• The majority of Digital NaBves feel disconnected and “off
the radar” without their phones.
User Group : Digital NaBves

261. à A Highly Social GeneraBon
à An ImpaBent GeneraBon

262. • As Digital Immigrants learn to adapt to their environment
• To some degree retain, their accent, that is, their foot in
the past.
• The “digital immigrant accent” can be seen in such things
as turning to the Internet for informaBon second rather
than first, or in reading the manual for a program rather
than assuming that the program itself will teach us to use
it.
• Today‟s older folk were socialized differently from their
kids, and are now in the process of learning a new
language. And a language learned later in life, scienBsts
tell us, goes into a different part of the brain.
User Group : Digital Immigrants

263. How to Provide an Outstanding User
Experience for Digital NaBves
à CreaBng stable, fast, user-­‐friendly online user experience is a
necessity!
à When designing for Digital NaBves keep these guidelines in mind:
• Offer quick access to whatever they need
• Keep it simple to hold their a[enBon
• Use visuals and as li[le text as possible
• Make your product self-­‐explanatory and intuiBve
• And last, but not least, give it a touch of fun
Reference:
hMp://uxmag.com/ar?cles/crea?ng-­‐outstanding-­‐experiences-­‐for-­‐digital-­‐na?ves

264. USER INTERVIEWS
CLASS ACTIVITY:
Personal Interviews and Focus group
discussion of people within your group
Understand the users ac(ons, needs,
aspira(ons and what they want out of the
app
20 minutes

265. InformaBon
Architecture

266. INFORMATION ARCHITECTURE
The categorizaBon of informaBon into
a coherent structure, preferably one
that the most people can understand
quickly, if not inherently.
It's usually hierarchical, but can have
other structures, such as concentric or
even chaoBc.

267. INFORMATION ARCHITECTURE
is not the same as
TECHNICAL ARCHITECTURE

268. Organizing InformaBon based on
• Date/Bme
• AlphabeBcal
• Geography/locaBon
• Topic
• Target audience
• Task/process
• A[ributes/facets
• CombinaBons

270. h*p://wiki.fluidproject.org/display/fluid/Affinity+Diagrams
Affinity Wall / Card SorBng

272. à Good InformaBon Architecture helps
immensely in the SEO.
à IA is the organizaBon and labeling of
website content to support usability
and findability.

273. UX is built step by step with
INFORMATION bits
Too much informaBon to
process, leads to CHAOS
Each informaBon processed
gives AN EXPERIENCE

274. Create InformaBon Architecture
for your Mobile app using Card
SorBng / Affinity Wall
Class AcBvity :
HOW TO DO
Step 1: DIVERGE (15 mins)
Record each idea on cards or post it notes.
Look for ideas that seem to be related
Step 2: CONVERGE (10 mins)
Sort cards into groups unBl all cards have been used.
25 mins

275. Task flow Conceptual models
Class AcBvity :
Ask what are the key things your app wants to do
create task flows for atleast 3 major tasks
20 mins

276. Wireframing Layouts
Wireframe: an image or set of images which displays
the func(onal elements of a website or page,
typically used for planning a site's structure and
func(onality.

277. Types of Prototypes
• Low Fidelity
• High Fidelity
• Horizontal Prototype
• Vertical Prototype

278. • Paper Prototypes and Sketches
• Easy to discard
Low Fidelity

279. High Fidelity
• Wireframes
• HTML Mockups

280. Horizontal Prototype
• Cover major functionalities
• Superficial information on all

281. VerBcal Prototype
• Deep into one or two functionality

282. Remember the responsive design challenge

285. Responsive Design: Things to consider
• Content : Show only what is important
• Layout : Importance to Screen Real estate
• White space : Give ample breathing space
• NavigaBon : easy to go across screens
• InteracBons : Easy to complete tasks
• Touch vs Mouse : Finger friendly
• Visual Design : AestheBcally pleasing
• Typography: Easy to read
• Color : Device screen competency

286. WIREFRAMING:
CREATE SKETCHES
PAPER PROTOTYPES
Class AcBvity :
Visualize your task flow in terms of layouts,
features and funcBonaliBes.
Iterate based on feedback
Use near to scale screen size on paper to layout
your designs
30 mins

287. Remember Responsive Design
or

288. “Make everything as simple as possible, but not simpler.”
—Albert Einstein

289. Delight vs Features ?

290. Dieter Rams-­‐ Principles of good design

291. Innova?ve
=
early
adop?on
Useful
=
increased
repeat
visits
Aesthe?c
=
improved
customer
sa?sfac?on
Understandable
=
reduced
errors
Unobtrusive
=
quicker
task
comple?on
Honest
=
does
everything
you
expect
Long
las?ng
=
less
release
cycles
Thorough
=
100%
task
comple?on
Environmentally
friendly
=
Responsive
(mul?-­‐device)
As
liMle
design
as
possible
=
lightweight
Dieter Rams-­‐ Principles of good design

292. h*p://www.slideshare.net/whitneyhess/10-­‐most-­‐common-­‐misconcep8ons-­‐about-­‐user-­‐experience-­‐design?from=ss_embed
USER EXPERIENCE MYTHS
1. User interface design
2. A step in the process
3. Just about technology
4. Just about usability
5. Just about the user
6. Expensive
7. Easy
8. The role of one person or dept
9. A single discipline
10. A choice
à It is the system
à It is the process
à It is about behavior
à It is about value
à It is about context
à It is flexible
à It is a balancing act
à It is a culture
à It is a collaboraBon
à It is a means of survival
© Whitney Hess @ whitneyhess
UX is NOT

293. THANK YOU
Email:
kshi?z@happyhorizons.in
|TwiMer:
@kshi?z
LinkedIn:
in.linkedin.com/in/kshi?zanand/