UX Overview_ZiaRahman
Upcoming SlideShare
Loading in...5
×
 

UX Overview_ZiaRahman

on

  • 910 views

 

Statistics

Views

Total Views
910
Views on SlideShare
904
Embed Views
6

Actions

Likes
0
Downloads
15
Comments
1

1 Embed 6

http://www.linkedin.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    UX Overview_ZiaRahman UX Overview_ZiaRahman Presentation Transcript

    • User Experience Design By 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 Frustration Annoyed Customer Negative perception Loss to Business
    • Why should we care about UX? Build Brand Loyalty It’s a Good Business Sense
    • The Misconception UX is Good User Interface UX is just about Usability UX is just about the User
    • 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 Requires a right balance Users Goals
    • How do we create great experiences?
    • Think about…. • 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
    • UX Vision Technology
    • Research • Business Goals • Product Strategy • Product Features • Go-to-Market • Roadmap • Revenue Model Market Study Business RESEARCH • Demographics Research • Psychographics Research • Job Type & Task • Challenges & Constraints • Needs & Expectations User Technology • Potential • Process & Workflow • Competitive Analysis • Challenges • Opportunities • Custom/Product • Features • Channels – Web/mobile • Challenges & Constraints • Market Trends
    • 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“ Design 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 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. Prototype (Wireframe) Personas Task Analysis & Task Flow Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users Design Usability Testing Visual Appearance & branding UI Engineerin g •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 •HTMLIZATION - HTML, CSS, JavaScript, •Compatibility – with all standard browsers •Accessibility Compliance – WCAG 2.0 (Priority 1,2, & 3)
    • User Goals Good quality food Personas A quick and painless online ordering of food 1. Expectation While Ordering Online 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 persona of a Teacher Offer variety, Quality , Efficient Delivery, Loyalty Points, Discounts, Combo Offers, One Click Order, Track the Delivery 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 2. 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. Persona Would like to order food online almost everyday Order food online when friends visit him. 3. 4. Time of the day you order food online the most? - Mostly evenings after school or twice on weekends. Expect from an online food ordering portal? Better apps for phone and tabs, lot of variety and good quantity. Difficulties faced by you when ordering food online?- None Biggest concern while ordering food online?Food taste when trying a new restaurant, would like to read few reviews. Scenarios 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. Click on favorites and open the website that he frequently visits, check for websites for offers and discounts. Order food as per friends taste
    • Task Analysis A sample task flow of online book store http://www.uxmatters.com/mt/archives/2010/02/hierarchicaltask-analysis.php
    • Prototype (Information Architecture) Affinity Building Process to Design Information Architecture
    • Prototype (Wireframe) A Sample Wireframe Design of Travel Booking website Tools - http://mashable.com/2010/07/15/wireframing-tools/
    • Visual Appearance & branding A Sample Visual Design of travel booking website http://www.hongkiat.com/blog/web-design-trends-2014/ http://www.slideshare.net/goldengekko/mobile-apps-designtrends-2014
    • http://www.csschopper.com/blog/responsive-web-designconsider-6-points-while-designing-a-website UI Engineering SWD - Scalable Web Design OR RWD Responsive Web Design HTML 5 CSS 3.0 JavaScript Library – JQuery, AngloJS, Bootstrap etc. Flash/Flex Web Font
    • http://uxdesign.smashingmagazine.com/2011/10/20/compreh ensive-review-usability-user-experience-testing-tools/ http://www.usability.gov/how-to-and-tools/methods/usabilitytesting.html Usability Testing 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. Focus Group Review Heuristic Evaluation 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. 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.
    • UX 360 Degree View Information Architecture Interaction Design Designing the Experience APIs Architecting the Technology 3 Content 2 User Touch Points Package Solution Creative Thinking Prototyping Visual Design (UI) User Research Back-end Testing Usability Branding Platform Total User Experience MultiLingual/ Localization Animation Business Analysis Total User Experience Defining the Problem 1 Business Intelligence Requirement Gathering Java Scripting Front-end Development Delivering the Experience 4 HTML Evaluation Research Accessibility Task Analysis Problem Framing Rich Interface Technology CSS Mobile & Tablet
    • Web App – UX Design Case Study
    • Global Workforce Planning Tool 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 - 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 userfriendly • 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 3 2 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, 3 Resource 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 Navigation Layout Color Palette Grid Buttons Fonts
    • Thanks Zia Rahman Consultant – UX Design zia.rahman@gmail.com