quick hello from

User Experience (UX)

BY: F O K H R U Z Z A M A N : B E S H TO, I PA P H O L I C S , A 2 I … .

M A S R U R H A N N A N : B O N O LOTA D E S I G N , M N H S

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)...

Sincerely: Fokhruz Zaman and Masrur Hannan.

Discussion topics1. What is User Experience (UX)

2. ROI of UX

3. Mobile UX

4. How to design User's Experience

5. UX, U, Us

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

IDEO experience from 1997-1998

Fokhruz Zaman’s working experience with

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

What is User Experience (UX)? … Generally speaking

User's experience when using any product/ service …

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Quick UX examples from daily life …

Digital Camera operations

TV Remotes – different TVs, different types

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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!

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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.

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Business viewpoints for UXRobert 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. ”

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Business viewpoints for UX 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_your_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 …”

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

UX design – global practices Top UX/ design firms of the world

Various top Silicon Valley companies that practice UX

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

ROI of UX … doodle video from HFI and NN/g article

www.youtube.com/watch?v=O94kYyzqvTc

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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 ……

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

User Experience (UX) design … continued

“WHAT WE DESIGN FOR… THE REALITY…”

Don’t Make Me Think, by Steve Krugg. Page: 21

http://www.sensible.com/dmmt.html

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

User Experience (UX) design … continued“What designers build – What users see”

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Don’t Make Me Think, by Steve Krugg. Page: 23

http://www.sensible.com/dmmt.html

User Experience (UX) design … continued

How do various product owner stakeholders see the same interface

Don’t Make Me Think, by Steve Krugg. Page: 126

http://www.sensible.com/dmmt.html

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

How to design User's Experience … how to 2

Various Methodologies – following the same principlesThe Strategy PlaneUser needs are the goals for the site that come from outside our organization—specifically from the people who will use our site. The Scope PlaneOn the information space side, scope takes the form of content requirements: a description of the various content elements that will be required. The Structure PlaneFor information spaces, the structure is the information architecture: the arrangement of content elements within the information space.The Skeleton PlaneThe skeleton plane breaks down into three components. The Surface PlaneFinally, 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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

How to design User's Experience … how to 3Considering 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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

https://class.coursera.org/hci/ nngroup.com/articles/

How to design User's Experience … 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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

http://www.amazon.com/Information-Architecture-World-Wide-Web/dp/0596527349

Prototyping … paper prototyping

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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

Prototyping … wireframes

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Iterative design and development …

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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 Usabilityhttp://www.nngroup.com/articles/parallel-and-iterative-design/

Iterative design and development …

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

NN/g article: Parallel & Iterative Design + Competitive Testing = High Usabilityhttp://www.nngroup.com/articles/parallel-and-iterative-design/

Iterative design and development … continued

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

http://www.nngroup.com/articles/parallel-and-iterative-design/

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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Mobile UXThe 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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Mobile UX… continuedThe Elements of Mobile User Experience

1. Functionality2. Information Architecture3. Content Design4. User Input5. Mobile Context6. Usability7. Trustworthiness8. Feedback9. Help10. Social Marketing

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

NN/g article: Optimizing a Screen for Mobile Usehttp://www.nngroup.com/articles/optimizing-a-screen-for-mobile-use/

Quick Tips ..continued

As few features as possibleSmall Screen – Bigger touch targets –

lesser options to click in 1 screen

source: http://mobiledesignpatterngallery.com/mobile-patterns.php

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Quick Tips ..continued

As less User Input as possible

source: http://mobiledesignpatterngallery.com/mobile-patterns.php

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Quick Tips ..continued

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

source: http://mobiledesignpatterngallery.com/mobile-patterns.php

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

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 ….

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Thanks … but would love to discuss more UX stuff :)

BASIS session: Let's talk UX!

Quick hello from UX - at ‘Mobile Monday’ – Dhaka Chapter (proposed) First Session: 5 August, 2013, at BASIS auditorium

Thanks again:

Fokhruz Zaman http://www.linkedin.com/in/fzaman

Masrur Hannan http://www.linkedin.com/in/masrurhannan