ux experience design: processes and strategy

38
Designing for UX Innovate Program | 2014.02.18 Khong Chee Weng Universal Usability & Interaction Design (UUID) SIG Interface Design Department | Faculty of Creative Multimedia Multimedia University | [email protected]

Upload: chi-ux-indonesia

Post on 21-Apr-2017

7.445 views

Category:

Internet


4 download

TRANSCRIPT

Designing for

UX Innovate Program | 2014.02.18

Khong Chee Weng Universal Usability & Interaction Design (UUID) SIG Interface Design Department | Faculty of Creative Multimedia Multimedia University | [email protected]

Functional Spec UI/UX Wireframes Visual

Design

A typical UI-UX Project

This is reasonable, but the process is NOT GOOD enough!

Clients

UX starts with People

UX focuses on having a deep understanding of USERS,

what they need,

what they value,

their abilities,

and also their limitations.

User’s Needs

Business Needs

UX

(Source: Google, 2013)

:: Involving USERS from the beginning &

throughout the design process.

::Designing for Your

Users It is all about making

your design usable.

(Norman on ‘Thoughtful Design’, 2008)

USABILITY is at the heart of the user experience (UX). Poor usability can lead users to abandon sites and it can cost businesses thousands and thousands of dollars.

(Source: www.goodui.org)

Minimalist Design

(Source: onetrapixel, 2013)

Skeuomorphism vs. Flat Design

(Source: Vukovic, 2013)

Typical 404 Error Webpages

User-friendly Error Webpage

User-friendly Error Webpage

A B

(Source: Interaction Design Foundation)

Mapping refers to the relationship between an object, either in the physical or virtual world, and its functions.

UX and Mapping

Top-down support

and implementation

User Research

Design Ethnography on Mobile Application & Social Interactions

© 2014. Interface Design Dept., FCM, MMU

User persona

User Persona & Scenario

© 2014. Interface Design Dept., FCM, MMU

© 2014. Interface Design Dept., FCM, MMU

Focus Group for Future Service Design

© 2014. Interface Design Dept., FCM, MMU

Icon Design Development: Mom-i Case Study

© 2014. Interface Design Dept., FCM, MMU

© 2014. Interface Design Dept., FCM, MMU

Lo-fi Prototyping & Wireframe

Lo-fi Prototyping & Wireframe

© 2014. Interface Design Dept., FCM, MMU

Lo-fi Prototyping & Wireframe

© 2014. Interface Design Dept., FCM, MMU

Lo-fi Prototyping & Wireframe

© 2014. Interface Design Dept., FCM, MMU

© 2014. Interface Design Dept., FCM, MMU

Hi-fi Prototyping

(Extract from http://ewamalaysia.com.my/ (October 2011)

Web UI Prototyping (Before)

© 2014. Interface Design Dept., FCM, MMU

Web UI Prototyping (After): Windows 8

Usability Testing © 2014. Interface Design Dept., FCM, MMU

4.02 4.14 4.16 4.23 4.04

01234567

OverallReaction to

SoftwarePerformance

Screen Terminology& SoftwareFeedback

Learning SoftwareCapabilities

Aver

age

Ratin

g

Categories

Overall User Satisfaction Rating

Rating

User Satisfaction Rating

Overall user satisfaction scores towards ABC Software is 4.11 out of 7.00.

© 2014. Interface Design Dept., FCM, MMU

© 2014. Interface Design Dept., FCM, MMU

Heuristic/Expert Review: UI Issue & Design Recommendations

• quick feedback with limited resources

• 5-6 respondents (1-2 experts and 4-5 novice users)

• uses a simple set of design/UI rules where quick judgement

can be made on the design/system being evaluated

• conducted in-house or anywhere convenient

The UX machine (Source: keepitusable)

Khong Chee Weng Universal Usability & Interaction Design (UUID) SIG Interface Design Department | Faculty of Creative Multimedia Multimedia University | [email protected]