Talk on UXD at the Nasscom's Girls in Tech conference. #bizathon. Also take a look at: http://gotocon.com/dl/goto-aar-2012/slides/JanneJulJensen_ButHowMethodsAndTechniquesToMakingAGoodUserInterface.pdf

1. 1
User Experience Design
User experience &
User Interface design
Kiran Subbaraman
@kirsn

2. 2

3. 3

4. 4

5. 5
Design
●
User Experience (UX)
– User Personas
– User Tasks and Flows: Core tasks, and peripheral tasks
– Content Architecture / Hierarchy
– Evaluation
– Guidelines
●
User Interface (UI)
– UX, Branding, and Creative inputs for Visual Design

6. 6
UX: Not just the web
●
Web
– Web based product, and experience centered around it
●
Customer support
– Voice calls, Instant Messaging, Email support, Social Media
●
Technology
– Desktop, Mobile (Smartphone, basic phones), Landline
●
Beyond the Web experience
– Human Computer Interaction, Industrial Design, etc

7. 7
UX: User Persona
●
Who are your users
– Describe your user types / personas: Inputs from user segmentation; based on
business model
– Provide them a Name.
– Capture Demographic details: age / gender / marital status / ethnicity /
knowledge of languages / mobility / disabilities / employment status / location...
– Capture Behaviour details: preferences, usual activities, interests
●
Examples
– Administrators: 30-45years, married, prefers mobile devices, works primarily
during the night-shift
– Students: 18-26 years, single, female, on social networks primarily on whatsapp,
early-adopter of technology

8. 8
UX: Additionally
●
Tasks
– Usecases, and flows: capture interaction needs
– Identify Core tasks, and peripheral tasks
●
Content architecture
– Information presented to the user, and their composition

9. 9
UX: Evaluation
●
Assessment of user perception
– Combination of subjective/objective data,
momentary/episodic recording of the evaluation, field/lab
location for the evaluation
– Try to understand if the user can rate this on: utility, usability,
aesthetic appeal, identification, value
– Different kinds of approaches from eye-tracking to eliciting
explicit responses

10. 10
UX: Guidelines
●
Less is More
– help the user focus on the task at hand, versus cluttering their screen with options.
– Walk through http://cleartrip.com, http://makemytrip.com
●
Minimize memory load
– Recognition over Recall: render a font name using the font, type-ahead, consistent location of
content / items
●
Clearly defined Exits
– Support undo/redo, reset/cancel
●
Maintain History
– Breadcrumbs, recently visited pages, etc
●
Speak the user's language
– Do not surface the system terminology / technology / internals to the user: walk through
https://www.bangaloreone.gov.in/public/default.aspx

11. 11
UX: Guidelines
●
Provide shortcuts
– Breadcrumbs, bookmarks, keyboard shortcuts for power users
●
Help and Documentation
– Context sensitive help, inline help, documentation, content-assist, eclipse cheat-sheets
●
Provide feedback
– What is the system doing, and its status
●
Prevent errors
– validations / additional prompts for destructive actions / consequence of an action etc
●
Consistency and standards
– Users should not have to wonder whether different words, situations, or actions mean the
same thing

12. 12
Examples
●
Prismatic
– http://getprismatic.com/
●
Boston Globe
– http://www.bostonglobe.com/
●
Cleartrip
– http://cleartrip.com
●
UX Mag
– http://uxmag.com/
●
Sidebar
– http://sidebar.io/
●
Bangalore One
– https://www.bangaloreone.gov.in/public/defau
●
IRCTC
– http://irctc.co.in/
●
Google search
– http://www.google.com
●
Fifa worldcup
– http://www.fifa.com/

13. 13
References
●
User experience
– Articles on Jakob Nielsen's site: http://www.nngroup.com/
– Examples: http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5
●
User Experience Evaluation
– https://en.wikipedia.org/wiki/User_experience_evaluation
●
UX vs UI design
– http://www.quora.com/User-Experience/Whats-the-difference-between-UI-and-UX-d
●
UI Design ideas / templates
– http://themeforest.net