Cevora Learning Snack: UX Design

Ux Design course

Learning Snack – 24.10.2013by Joost Landsheere

Elements of Ux design GUI design1.

3Ux Design – Learning snack for Syntra West By Joost Landsheere

Scope

“I see all my work as part of a coherent pattern, moving toward products and services that truly fit human needs”

— Donald Norman


Gui Design : what is it ?

Experience design

Information architecture

Interaction design

Usability design

focus on organisation en retrievinginformation

focus on creating relations between sequential actions to allow the userto perform tasks

focus on testing en evaluating

combines the other elements to create meaningfull applications for users

GUIDESIGN


Gui Design : workflow?

6Ux Design – Learning snack for Syntra West

User needs

Site objectives

Functional ContentSpecifications Requirements

Interaction InformationDesign Architecture

abstract conception

concrete completion

task-oriented information-oriented

web as software interface web as hypertext system

User Needs : Externally derived goals for the site; identified through user research, ethno/techno graphics, etcSite objectives : business, creative, or other internally derived goals for the site

User Needs : Externally derived goals for the site; identified through user research, ethno/techno graphics, etcSite objectives : business, creative, or other internally derived goals for the site

Functional Specifications: "feature set":detailed descriptions of functionality the site must include in order to meet user needs

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Information Architecture: structural design of the information space to facilitate intuitive access to content

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense: designing the presentation of information to facilitate understanding

Navigation Design: design of interfaceelements to facilitate the user’s movement trough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel")

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

© 2000 Jesse James Garrett

The elements of User Experience & GUI Design

Interface NavigationDesign Design

Information design

Visual Design

Howest • Ux Design Course By Joost Landsheere


Discovering users — losing ourselves

Resources

resource reliability

Hearsay : 3rd level resource Less reliabele since other people tell you thing about other users. Most easy to

capture within the organization via various resources, eg. : marketing, sales,

management & support

Inferred : 2nd level resource Derivated informationresources: e-mails tosupport, feedback

forms, …

Reported : 1st level resource Reports from internal / external systems

Observed : 1st level resource Your personal user observation


User profiles - PersonaUser Profile : Name

DescriptionDescribe all relevant personal and professional characteristics

Domain knowledgeBasic | Medium | Advanced

System knowledgeBasic | Medium | Advanced

User patternLow | Average | High

Frequency : Regularity :Intencity:

Expectation Shapers

Usability priorities Learning curve : Memorability : Efficiency :other? :


Site objectives

Goals vs. objectives

GOALS OBJECTIVES

GOALS = WHAT OBJECTIVES = HOW

Vb. - Make users aware that the global warming is reality

Examples.- Overview of cost per person of global warming from now

within 100 years- use picture gallery to show impact of global warming on

nature- recognise and pin-point the effets of global warming with

examples

Overall statements for the project Specific items to underpin the goal

What is the ‘target’ of the project An objective always starts with an active verb

One project can have multiple goals and each goal can have multiple objectives

Objectives can be measured


Site objectives

Models• Core methode in User Centred approach• Target to discover design problems and create a good

solution

From Model to Design• Task Models• Content Models• Prototypes• Visualisatie• Walkthroughs


Requirements

Framework for selecting the technique

Brainstorming,workshops

prototypes

Interviews, work in target environment

Questionnaires, workshops, prototypes

Catch-up Mature

Selling / teachingFuzzy problem

HIGH

LOW HIGHDevelopment Team Experience

Cust

omer

/ U

ser E

xper

ienc

e


Information ArchitectureMethod Research Type Activity Learn About Project Stage

Open card sorting Generative Organizing Mental modelsOrganizationLabelingRelationships between items

Early user research

Modified Delphi card sorting

Generative Organizing Mental modelsOrganizationLabelingRelationships between items

Early user research

Closed card sorting Evaluative Organizing OrganizationLabeling

Information architecture design

Reverse card sorting Evaluative Finding OrganizationLabelingFindability

Information architecture design

Tree testing Evaluative Finding OrganizationLabelingFindability

Interface design

Usability testing with low-fidelity prototypes

Evaluative Finding OrganizationLabelingFindabilityNavigation designInterface design

Interface design


Interaction Design

MethodesVisibilityFeedbackAffordancesMappingConstraintsHabituation <> Breakdown

How to design for better interactions ?


Navigation Design

ModelsHorizontal bar navigationVertical bar navigationTab navigationBreadcrumb navigationTags NavigationSearch NavigationFly-out / drop-down navigationFaceted / guided navigationFooter navigation


Interface Design

WhatUser Interface Design patterns are recurring solutions that solve common design problems in a specific context.Design patterns are standard reference points for the experienced user interface designer.

Resourceshttp://developer.yahoo.com/ypatterns/

mailto:http://developer.yahoo.com/ypatterns/%23http://developer.yahoo.com/ypatterns/%20




Information Design

Desktop vs. Mobile2.


Click vs. gesture

Click distracts attentionGesture follows natural movements and interaction with a physical objectGesture will go beound ‘touch area’

• tactile feedback• gravity & other simulations of

physical behaviour• accelaration sensing• orientation awareness


Attention for ...

keypad and trackpad to touchscreenslinks to tabs / plans / rowsmulti column to single columnsimple navigationsensors and smartness


Native vs. webapp

NATIVENATIVE APP WEB APP

Advantages Advantages

• Full access to device capabilities• Integration with other native apps• Off-line operational• ‘Push’ notifications• Seamless design• Runs faster• Dev Frameworks• Installation via app stores

• Cross device support• Quick development• Instant update process• No lock in to app store (no 30% cut)• HTML5 is doing more

Disadvantages Disadvantages

• Device specific• Lock in to device upgrades

• Less functionality• Limited integration with device• Off-line is difficult• Less seamless with other apps


Ux controls mobile – Android

https://mockupstogo.mybalsamiq.com/projects/android/Android%204%20Controls


Ux controls mobile – iOS

https://mockupstogo.mybalsamiq.com/projects/ios/iPad%20Controlshttps://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289

https://mockupstogo.mybalsamiq.com/projects/ios/iPad%20Controls

https://developer.apple.com/library/ios/design/index.html%23//apple_ref/doc/uid/TP40013289


Ux controls desktop

http://developer.yahoo.com/ypatterns/everything.html

Prototyping3.


Paper prototyping

Modelsused to evaluate the idea behind the drawingused to draw the skeleton of the interface (pointing where which content will appear), while wireframes go beound this skeleton by adding more information and call-outs for functionality)paper is used in early phases to sketch out and test ideas, where tools are used to make you think in depth to optimizeInteractivity can be emulated with paper prototype (watch this video)

http://youtu.be/GrV2SZuRPv0


Digital Wireframing

www.balsamiq.comeasy way to create interactive wireframespre-defined UI control librariespossibility to share and interact with other team membersadding basic interaction is added value for IA interaction between different content items

Practice4.


Project Description

ProblemObesity and resultant Type 2 diabetes are major health concerns throughout the world. For those people wishing to maintain or improve their health, currently existing health-oriented mobile-phone applications provide many usable, useful functions, including medicine-intake monitoring, pain management, weight loss programs, exercises tutoring, and health-indicators tracking (e.g., blood pressure and heart rate). According to the many Diabetes Associations, a combination of exercises, healthier food, and weight control will be more effective to alleviate or prevent diabetes. Unfortunately, seldom do the applications combine many of these functions; they tend to be specialized. Above all, these products do not provide an overall “persuasion path” to change users’ short-term and long-term behavior, leading to a healthier lifestyle.


The Concept

The ideabrainstorm for different perspectives on the issueThen describe the selected concept in 1 page


Personas

User profilesResearch and describe the characteristics of the different user profilesmake a description of each persona and add other characteristic details – enrich the profile with a picture of who the persona should represent


Use Scenarios

Define some real life situations that can be used as use scenarios to test the concept or specific situations


IA

Information ArchitectureWork out the information architecture based on your concept, site objectives, persona, content requirements & functional specifications


1st Sketches

Paper prototypingpick 3 screens from your structure and sketch them on papertest the sketches with peers and/or persona to discover their acceptance

Tips to start now !5.


Tips & trick

1. You are not the user2. You are not the user3. the user is not the designer4. Ux is no cooking book stuff5. go out to observe the user6. Dive into the project theme and become a specialist7. Test early, test often (card sorting, paper prototyping, interactive

wireframes, ...)8. Use accepted resources for UI component Libraries

• iOS : https://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289

• Microsoft : http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx• Android : http://developer.android.com/guide/topics/ui/index.html

9. Learn to ask the right questions (be underdog)10.Be skeptical to the answer you get ... always ask ‘why’ 11.Practice ... practice ... practice



http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx

http://developer.android.com/guide/topics/ui/index.html

http://developer.android.com/guide/topics/ui/index.html

Cevora Learning Snack: UX Design

Design

Transcript of Cevora Learning Snack: UX Design