Date post: | 27-Jan-2015 |
Category: |
Design |
Upload: | jkt-learning-solutions-pvt-ltd |
View: | 103 times |
Download: | 0 times |
User Experience DesignBy Zia Rahman
Intro to User Experience Design
What is User Experience (UX)
User Experience is a way a person feels about using a product, system or service
User
person
Feelings
People are emotional
Experience
Using Something
Bad UX
FrustrationAnnoyed Customer Negative perception
Loss to Business
Why should we care about UX?
Build Brand LoyaltyIt’s a Good Business Sense
UX is Good User Interface
UX is just about Usability
UX is just about the User
The Misconception
So is UX about a Good User Interface?
Certainly Not..
So is UX just about Usability?
This would lead to destination
This would be a fun trip to the destination
So is UX just about the User?
Business Goals
Users Goals
Requires a right balance
How do we create great experiences?
• The company and the business need
• The competition in market
• The people (users of the product/services)
• The process and the inter dependencies
• The technology and it’s limitations
Think about….
UX Vision
Technology
Research
Business Market Study
User Technology
RESEARCH
• Business Goals• Product Strategy• Product Features• Go-to-Market• Roadmap• Revenue Model
• Potential• Process & Workflow• Competitive Analysis• Challenges• Opportunities
• Demographics Research• Psychographics Research• Job Type & Task• Challenges & Constraints• Needs & Expectations
• Custom/Product• Features• Channels – Web/mobile• Challenges & Constraints• Market Trends
Design
Design
PersonasPrototype
(Wireframe)
Usability Testing
UI Engineerin
g
Personas identify the user motivations, expectations and goals responsible for driving online behavior, and bring users to life by giving them names, personalities and often a photo
Information Architecture - Focuses on organizing, structuring, and labeling content in an effective and sustainable way.Interaction Design - often abbreviated IxD, is "about shaping digital things for people’s use“
Task analysis is the process of learning about ordinary users by observing them in action to understand in detail how they perform their tasks and achieve their intended goals. •HTMLIZATION - HTML, CSS, JavaScript,
•Compatibility – with all standard browsers•Accessibility Compliance – WCAG 2.0 (Priority 1,2, & 3)
Task Analysis & Task Flow
Visual Appearance & branding
•Visual Appearance –Design theme, layout, graphics, typography, colour scheme, animation and selecting appropriate images to support the brand message•Branding: Guidelines and style guide assets
Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users
A sample persona of a Teacher
Personas
Khaled The Foodie!
I live to eat, I love trying out new
food.
Name - Khaled Tariq
Age - 27 years
Income - 10,000 SAR
Industry - Teaching
Employer - Al Hussan International
School – Riyadh
Computer Skills – Intermediate
Device - Laptop & Android Phone
Orders food online almost every
day after school.
User Goals
Good quality food
A quick and painless online
ordering of food
Background
Khaled is very active in filed field and contributes
to a variety of information platforms, including his
own website, wikis, and blogs. Khaled lives alone
and spends most of the time in school, at end of
the day he wants to come home and relax and
order his food online at times. A typical day for
Khaled starts with school in the morning, visiting
friends or family in evening if there is strength left
he cooks or he orders food online. He is a foodie,
he loves trying out new food and often take
recommendations from people around him. “I
would like to order food online, at good price and
where I can get lot of variety”
Khaled likes spending time on internet looking for
recipes when he is not working on school
assignments, he orders online what he can’t cook
or least to say can’t cook it “good enough”.
Preferred Restaurants
Expectation While Ordering Online
Offer variety, Quality , Efficient Delivery,
Loyalty Points, Discounts, Combo Offers,
One Click Order, Track the Delivery
Persona Scenarios
Would like to order food online
almost everyday
Checks online for recipes or food he can order. Is heavily
influenced by recommendations made by colleagues, friends
and relatives
Finds site compare prices and orders food that looks alluring
and suits the budget.
Order food online when friends
visit him.
Click on favorites and open the website that he frequently
visits, check for websites for offers and discounts.
Order food as per friends taste
1. Time of the day you order food online the most? - Mostly evenings after school or twice on weekends.
2. Expect from an online food ordering portal? -Better apps for phone and tabs, lot of variety and good quantity.
3. Difficulties faced by you when ordering food online?- None
4. Biggest concern while ordering food online?-Food taste when trying a new restaurant, would like to read few reviews.
A persona represents a cluster of users who exhibit similar behavioral patterns in their purchasing decisions, use of technology or products, customer service preferences, lifestyle choices, and the like
A sample task flow of online book store
Task Analysis
http://www.uxmatters.com/mt/archives/2010/02/hierarchical-task-analysis.php
Affinity Building Process to Design Information Architecture
Prototype(Information Architecture)
A Sample WireframeDesign of Travel Booking website
Tools - http://mashable.com/2010/07/15/wireframing-tools/
Prototype(Wireframe)
A Sample Visual Design of travel booking website
http://www.hongkiat.com/blog/web-design-trends-2014/
http://www.slideshare.net/goldengekko/mobile-apps-design-trends-2014
Visual Appearance & branding
UI Engineering
HTML 5CSS 3.0JavaScript Library –JQuery, AngloJS, Bootstrap etc.Flash/FlexWeb Font
SWD - Scalable Web Design ORRWD -Responsive Web Design
http://www.csschopper.com/blog/responsive-web-design-consider-6-points-while-designing-a-website
Usability Testing
Heuristic Evaluation
Focus Group Review
Lab Testing
Heuristic Evaluation is a discount method for quick, cheap, and easy evaluation of the user interface.
The process requires that a small set of testers (or “evaluators”) examine the interface, and judge its compliance with recognized usability principles (the “heuristics”). The goal is the identification of any usability issues so that they can be addressed as part of an iterative process.
A focused discussion where a moderator leads a group of participants through a set of questions on a particular topic. Focus groups are often used in the early stages of product planning and requirements gathering to obtain feedback about users, products, concepts, prototypes , tasks, strategies, and environments.
http://uxdesign.smashingmagazine.com/2011/10/20/comprehensive-review-usability-user-experience-testing-tools/
Usability testing is a method by which users of a product are asked to perform certain tasks in an effort to measure the product's ease-of-use, task time, and the user's perception of the experience. Usability testing can be done formally, in a usability lab with video cameras, or informally, with paper mock-ups of an application or Web site.
http://www.usability.gov/how-to-and-tools/methods/usability-testing.html
Defining the
Problem Delivering the
Experience
Architecting the
TechnologyDesigning the
Experience
Total User
Experience
Interaction Design
InformationArchitecture
Usability
Content
User Research
Branding
Visual Design (UI)
Creative Thinking
Front-end Development
Animation
JavaScripting
CSSRich Interface
Technology
HTML
Accessibility
Mobile & Tablet
Multi-Lingual/
Localization
Back-end
Prototyping
APIsPackage Solution
Platform
Testing
Task Analysis
Requirement Gathering
Problem Framing
Business Intelligence
Evaluation
Business Analysis
Research
1
23
4
UX 360 Degree View
User Touch Points
Total User Experience
Web App – UX Design Case Study
Evaluation of Staffing Needs Workforce Planning tool provides a solid Data Foundation and Resource Tracking capability to support basic Resource Management today and more advanced analytics in the future
Primary Users: Managers
User concerns / our observations:• Poor usage by managers; not user-friendly• Unstructured information and navigation flow• Tasks flows too complex; too many clicks• Lack of clarity in visual data and screen layouts
Global Workforce Planning Tool
Global Workforce Planning - Before
• Homepage not well structured; does not give useful information upfront
• Navigation not intuitive. Start point and flow is not understandable
• No Textual / Visual Aids
• Improper utilization of screen real estate. Design is not scalable to accommodate more regions
Landing Page Group Model Selection
Global Workforce Planning - Before
• Very cluttered and confusing design.
• No proper grouping of the sections to make the form simpler
• Input forms not user-friendly
• No search, filtering or sorting
• Cognitive overload for the new user and for existing user very cumbersome process to work form
Resource Management Page
What we did & how
• Interaction with business users
• User interviews and questionnaires
• Information Architecture & screen flows
• Wire frames for visual interpretation of the interaction model.
• Visual Design & HTML prototype tested by users
• Iterative prototyping process
• Prototype as baseline for development
• Usability Testing
• UI Style guide standardization
Global Workforce Planning– Wireframe 1
2
3
1 Login Page – A neat a balance design layout
2 Landing Page to select Model Group– Well defined and clearly visible navigation, Step-by-step approach to select model group and , scalable to add more regions,
3Resource Planning Page – Step-by-step approach by grouping sections under 4 to steps to fill/update data and generate report. Introduce search to find a particular record, structured information, expandable list view to update a record
Global Workforce Planning– New UI
Login
Group Model Selection
Global Workforce Planning– New UI
Resource Management
Global Workforce Planning– StyleGuide
Layout
Color Palette
Buttons Fonts
Navigation
Grid