Mobile Monday Dhaka Chapter (proposed) first session UX Aug 5 2013 MHannan FZaman

quick hello from
User Experience (UX)
BY: FOKHRUZ ZAMAN: BESHTO, IPAPHOLICS, A2I ….
MASRUR HANNAN: BONOLOTA DESIGN, MNHS
Mobile Monday – Dhaka Chapter (proposed)
First Session: 5 August, 2013, 4.30 – 6.30 PM
Venue: BASIS auditorium, 5th floor, BDBL building, Karwan Bazaar, Dhaka
Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Disclaimer:
This introductory UX session will NOT guarantee that
the participants will develop the ability to produce
super awesome
Mobile apps...
However, this session will discuss various
methodologies that are used by successful Silicon
Valley ventures in producing super awesome mobile
apps, web apps, desktop apps, computers and even
mobile phones (iPhone)...

Discussion topics
1. What is User Experience (UX)
2. ROI of UX
3. Mobile UX
4. How to design User's Experience
5. UX, U, Us

IDEO experience from 1997-1998
Fokhruz Zaman’s
working experience with

What is User Experience (UX)?…
Generally speaking
User's experience when using any product/ service …

Quick UX examples from daily life …
Digital Camera operations
TV Remotes – different TVs, different types

User Experience (UX) …. with DOORS!
How about Doors?! … Some you push, some you pull, some slide.
Note: all doors have certain attributes:
◦ Visibility
◦ Mapping
◦ Clues
◦ Feedback
◦ Affordance

Things we do and use everyday …
the super awesome mobile apps
YOU produce, if lucky - will be
ONE of such 20,000 things your
user will use!
twenty thousand
(20,000) things we deal
with in everyday lives!
Design of Everyday Things, by
Don Norman. Page: 11

Origins of User Experience
Various principles of
psychology – that make
things Understandable and
Usable for humans.

Business viewpoints for UX
Scout Stevenson,
Creative Director at
Extension Engine
Harvard i-lab
UX Design: An Introduction
with Scout Stevenson
http://www.youtube.com/watch?v=WkUwbPdyMIY

Robert Fabricant, Vice President of Creative for frog (Apple's UX firm)
at Harvard Business Review:
http://blogs.hbr.org/cs/2013/01/scaling_your_ux_strategy.html
“It's the "new black," to borrow from a fashion phrase —
as well as a reference to its influence on profitability.”
“The recognition of UX's importance seems to be slowly sinking
into corporate culture the way "brand" did a decade ago. ”

Instagram’s $1 billion USD takeover by Facebook
Robert Fabricant, Vice President of
Creative for frog (Apple's UX firm)
at Harvard Business Review.
http://blogs.hbr.org/cs/2013/01/scaling_yo
ur_ux_strategy.html
“Just look at the $1 billion price tag paid
by Facebook for Instagram, whose primary
asset is not technology, but the best photo
sharing UX in the business …”

UX design – global practices
Top UX/ design firms of the worldVarious top Silicon Valley companies that practice UX

ROI of UX … doodle video from HFI and NN/g
article
www.youtube.com/watch?v=O94kYyzqvTc
Summary: Development projects
should spend 10% of their
budget on usability. Following a
usability redesign, websites
increase desired metrics by
135% on average; intranets
improve slightly less.
http://www.nngroup.com/articles/return-
on-investment-for-usability/
NN/g article: Return on
Investment for Usability

Designing GOOD User Experience ..
Possible
UX is a field of it's own, based on the principles of –
• Human Computer Interaction (HCI)
• Interaction Design
• Information Architecture
• Usability principles

User Experience (UX) design … how
to
Designing GREAT products that bring people JOY!
• Quick rule of thumbs for good UX: Intuitive!
• No squinting eye-brows for users …
• Answer user's “behind the scene” thoughts
• and MANY more ……

User Experience (UX) design …
continued
No squinting eye-brows for users …
Don’t Make Me
Think, by Steve
Krugg. Page: 13
http://www.sensible.com/dmmt.html

continued
“WHAT WE DESIGN FOR… THE REALITY…”
Don’t Make Me
Think, by Steve
Krugg. Page: 21

continued
“What designers build – What users see”
Don’t Make Me
Think, by Steve
Krugg. Page: 23

continued
How do various product owner stakeholders see the same interface
Don’t Make Me
Think, by Steve
Krugg. Page: 126

How to design User's Experience …
how to 2
Various Methodologies – following the same principles
The Strategy Plane
User needs are the goals for the site that come from
outside our organization—specifically from the
people who will use our site.
The Scope Plane
On the information space side, scope takes the form
of content requirements: a description of the various
content elements that will be required.
The Structure Plane
For information spaces, the structure is the
information architecture: the arrangement of
content elements within the information space.
The Skeleton Plane
The skeleton plane breaks down into three
components.
The Surface Plane
Finally, we have the surface. Regardless of whether
we are dealing with a software product or an
information space…
A popular schema of User
Experience design: Jesse James
Garrett’s FIVE planes of user
experience design, explained
thoroughly in the book The
Elements of User Experience:
http://www.jjg.net/elements/pdf/elements_ch02.pdf

how to 3
Considering the Bangladeshi development context, based on the following
resources (Books, MOOC, NN/G) – the process I (Masrur Hannan) try to follow
for User Experience (UX) design practices …
Books:
• Design of Everyday Things, by Don Norman
• Don’t Make Me Think, by Steve Krugg
• Information Architecture for the World Wide Web, by Peter Morville …
• Sketching User Experience, by Bill Buxton
• Elements of User Experience, by Jesse James Garrett
https://class.coursera.org/hci/ nngroup.com/articles/

how to 4
1.Initial research, ideation, inspiration hunt and concept finalization
2.Prototyping, wireframes, taxonomy development
3.User Testing with prototypes – early stage user feedback collection
4.Iterative design and development work with rigorous User Testing
5.Post-launch testing: performance, user behavior etc – and continue
improvement work along with User Testing with each iteration

Initial research … Information Ecology
[Information Architecture for the World Wide Web: Designing Large-Scale Web Sites, 2006, page 25]
Three inter-dependent components of an information ecology
http://www.amazon.com/Information-Architecture-World-Wide-Web/dp/0596527349

Prototyping … paper prototyping
NN/g article: Paper Prototyping: Getting User Data Before You Code
With a paper prototype, you can user test early design
ideas at an extremely low cost. Doing so lets you fix
usability problems before you waste money
implementing something that doesn't work.
http://www.nngroup.com/articles/paper-prototyping/

Prototyping … paper prototyping
http://www.nngroup.com/articles/paper-prototyping/

Prototyping … wireframes

Iterative design and development …
3 methods for increasing UX quality by exploring and testing diverse design
ideas work even better when you use them together. You can achieve a high-
quality user interface by combining 3 design process models:
1.Competitive testing
2.Parallel design
3.Iterative design
NN/g article: Parallel & Iterative Design + Competitive Testing = High Usability
http://www.nngroup.com/articles/parallel-and-iterative-design/

NN/g article: Parallel & Iterative Design + Competitive Testing = High Usability

continued

User Testing
Extensive user testing
Ideal one-to-one user testing with hand-written notes
http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
NN/g article: Why You Only Need to Test with 5 Users

Mobile UX
The Lifecycle of a Mobile App, a User’s Perspective - Michael Griffith , Ex UX Director, HP
1. Stage One: The App Store Experience
2. Stage Two: The First-Open Experience
3. Stage Three: Attempting Simple Tasks
4. Stage Four: Attempting Complex Tasks
http://www.uxmatters.com/mt/archives/2011/10/the-lifecycle-of-a-
mobile-app-a-users-perspective.php

Mobile UX… continued
The Elements of Mobile User Experience
1. Functionality
2. Information Architecture
3. Content Design
4. User Input
5. Mobile Context
6. Usability
7. Trustworthiness
8. Feedback
9. Help
10. Social Marketing
http://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/

Mobile App UX improvement Quick Tips:
• As few features as possible
• Small screen, bigger touch targets
• Easy readability and smooth interactions
• As less User Input as possible
• Lesser options to click in 1 screen
• Avoid requiring use of both hands for inputs
• Alerts/ Errors – should be brief and must contain a clear message
NN/g article: Optimizing a Screen for Mobile Use
http://www.nngroup.com/articles/optimizing-a-screen-for-mobile-use/

Quick Tips ..continued
As few features as possible
Small Screen – Bigger touch targets –
lesser options to click in 1 screen
source: http://mobiledesignpatterngallery.com/mobile-patterns.php

As less User Input as possible

Alerts/ Errors – should be brief and must contain a clear message

UX, U, Us
• Scaling your UX strategy:
http://blogs.hbr.org/cs/2013/01/scaling_your_ux_strategy.html
• More UX discussions in upcoming Mobile Monday
sessions
for more detailed discussion and interactive sessions ….

Thanks … but would love to discuss more UX
stuff :)
BASIS session: Let's talk UX!
Thanks again:
Fokhruz Zaman
http://www.linkedin.com/in/fzaman
Masrur Hannan
http://www.linkedin.com/in/masrurhannan

Mobile Monday Dhaka Chapter (proposed) first session UX Aug 5 2013 MHannan FZaman

Recommandé

Recommandé

Contenu connexe

Similaire à Mobile Monday Dhaka Chapter (proposed) first session UX Aug 5 2013 MHannan FZaman

Similaire à Mobile Monday Dhaka Chapter (proposed) first session UX Aug 5 2013 MHannan FZaman (20)

Dernier

Dernier (20)

Mobile Monday Dhaka Chapter (proposed) first session UX Aug 5 2013 MHannan FZaman