72
Designing UI Principles and Process

Design Theory - Ankur Sharma - Presentation

Embed Size (px)

DESCRIPTION

Mr. Ankur Sharma was one of the trainers who talked about what the design should be, how to start with one and how to get there.

Citation preview

Page 1: Design Theory - Ankur Sharma - Presentation

Designing UIPrinciples and Process

Page 2: Design Theory - Ankur Sharma - Presentation

Design

Page 3: Design Theory - Ankur Sharma - Presentation

which one?how to figure them out when you are in shower, half blind?

Page 4: Design Theory - Ankur Sharma - Presentation

connectorloop{flip, can’t insert, flip again, can’t insert}

Page 5: Design Theory - Ankur Sharma - Presentation

freeze or boilhow to set perfect temperature?

Page 6: Design Theory - Ankur Sharma - Presentation

dividerare they even safe? during night??

Page 7: Design Theory - Ankur Sharma - Presentation

but how?What was the installer/interior/engineer thinking?

Page 8: Design Theory - Ankur Sharma - Presentation
Page 9: Design Theory - Ankur Sharma - Presentation

Criteria

Page 10: Design Theory - Ankur Sharma - Presentation

affordancesWhen you see it you will know it.

Page 11: Design Theory - Ankur Sharma - Presentation

affordancesWhat to do with this controls

Page 12: Design Theory - Ankur Sharma - Presentation

constraintsrestrict user interaction to reduce error

Page 13: Design Theory - Ankur Sharma - Presentation

constraintsWhich of the controls are usable

Page 14: Design Theory - Ankur Sharma - Presentation

conceptual modelmental image of how system works, more closer to functionality the better.

Page 15: Design Theory - Ankur Sharma - Presentation

mappingrelationship between control parameters and it’s effect

Page 16: Design Theory - Ankur Sharma - Presentation

visibilitymake sure the available controls are obvious and visible

Page 17: Design Theory - Ankur Sharma - Presentation

feedbacklet user know what is happening

Page 18: Design Theory - Ankur Sharma - Presentation

feedbackThe states description

Page 19: Design Theory - Ankur Sharma - Presentation

consistencysimilarity in similar function and identical way to perform them

Page 20: Design Theory - Ankur Sharma - Presentation

consistencyThe button arrangement across different OSes

Page 21: Design Theory - Ankur Sharma - Presentation

Principle

Page 22: Design Theory - Ankur Sharma - Presentation
Page 23: Design Theory - Ankur Sharma - Presentation

Dieter Rams 10 principles of good design

•Is innovative •Makes a product useful •Is aesthetic •Makes a product understandable

•Is unobtrusive •Is honest

•Is long-lasting •Is thorough down to the last detail

•Is environmentally friendly

•Is as little design as possible

Page 24: Design Theory - Ankur Sharma - Presentation

Design process

Page 25: Design Theory - Ankur Sharma - Presentation

develop conceptobjective, user and resources

Page 26: Design Theory - Ankur Sharma - Presentation

researchdo need analysis, business research and constrains

Page 27: Design Theory - Ankur Sharma - Presentation

prototypeyou never know until you do it

Page 28: Design Theory - Ankur Sharma - Presentation

refinementiterate, review, tests and prototype again

Page 29: Design Theory - Ankur Sharma - Presentation

Implementpractices, documentation and polishing

Page 30: Design Theory - Ankur Sharma - Presentation

supportevaluation, maintenance and training

Page 31: Design Theory - Ankur Sharma - Presentation

Ethnography

Page 32: Design Theory - Ankur Sharma - Presentation

https://www.youtube.com/watch?v=N4t3-__3MA0How the design is perceived by real world

Page 33: Design Theory - Ankur Sharma - Presentation

Project Synopsis

Page 34: Design Theory - Ankur Sharma - Presentation

Content for synopsis • Summary (One sentence

description)

• Application (One paragraph brief explanation)

• Activity (Bullet list of activities)

• Audience (One paragraph about intended audience)

Page 35: Design Theory - Ankur Sharma - Presentation

Requirement

Page 36: Design Theory - Ankur Sharma - Presentation

Fashion store app• Functional: Allow consumers to browse and purchase clothing merchandise

• Data: The system must have access to prices, pictures of merchandise, and up-to-date inventory.

• Environmental: Widely distributed, usually home. On phone and tablets.

• User: Anyone with interest in clothing purchases

• Usability: Simple to operate. Give feedback on stage is sales process. Distinguish buying from “window shopping” payment application.Optimised for tablet viewing.

Page 37: Design Theory - Ankur Sharma - Presentation

User story

Page 38: Design Theory - Ankur Sharma - Presentation

persona

• Body

• Psyche

• Background Information

• Emotion and Attitude

• Personal Traits

Page 39: Design Theory - Ankur Sharma - Presentation

persona

Page 40: Design Theory - Ankur Sharma - Presentation

conceptual design

Page 41: Design Theory - Ankur Sharma - Presentation

metaphorphysical link with interface

Page 42: Design Theory - Ankur Sharma - Presentation

interface stylephysical link with interface

Page 43: Design Theory - Ankur Sharma - Presentation

interaction stylephysical link with interface

Page 44: Design Theory - Ankur Sharma - Presentation

Prototype

Page 45: Design Theory - Ankur Sharma - Presentation

Best description?

Page 46: Design Theory - Ankur Sharma - Presentation
Page 47: Design Theory - Ankur Sharma - Presentation

visual and hapticYou can feel, use and improve the product

Page 48: Design Theory - Ankur Sharma - Presentation

pretendotypePalm pilot prototype by Jeff Hawkins

Page 49: Design Theory - Ankur Sharma - Presentation

types

Page 50: Design Theory - Ankur Sharma - Presentation

lo-fipen and paper, goes well with scenario

Page 51: Design Theory - Ankur Sharma - Presentation

hi-fiTalks about look and feel, as good as final product

Page 52: Design Theory - Ankur Sharma - Presentation

functionalShows interactions, let user use it

Page 53: Design Theory - Ankur Sharma - Presentation

compromises

Page 54: Design Theory - Ankur Sharma - Presentation

horizontal vs verticalThe scope helps set target right

Page 55: Design Theory - Ankur Sharma - Presentation

Evaluation

Page 56: Design Theory - Ankur Sharma - Presentation

WHY EVALUATEto test the usability of the system and to avoid pitfalls

Page 57: Design Theory - Ankur Sharma - Presentation

COGNITIVE WALKTHROUGHdefine a task and walk through necessary steps to perform the

given task

Page 58: Design Theory - Ankur Sharma - Presentation

LIKERT SCALEasking questions the right way.

Page 59: Design Theory - Ankur Sharma - Presentation

NIELSEN AND MOLICH'S NINE HEURISTICS

• Simple and natural dialog Simple means no irrelevant or rarely used information. Natural means an order that matches the task.

• Speak the user's language Use words and concepts from the user's world. Don't use system-specific engineering terms.

• Minimize user memory load Don't make the user remember things from one action to the next. Leave information on the screen until it's not needed.

Page 60: Design Theory - Ankur Sharma - Presentation

NIELSEN AND MOLICH'S NINE HEURISTICS

• Be consistent Users should be able to learn an action sequence in one part of the system and apply it again to get similar results in other places.

• Provide feedback Let users know what effect their actions have on the system.

• Provide clearly marked exits If users get into part of the system that doesn't interest them, they should always be able to get out quickly without damaging anything.

Page 61: Design Theory - Ankur Sharma - Presentation

NIELSEN AND MOLICH'S NINE HEURISTICS

• Provide shortcuts Shortcuts can help experienced users avoid lengthy dialogs and informational messages that they don't need.

• Good error messages Good error messages let the user know what the problem is and how to correct it.

• Prevent errors Whenever you write an error message you should also ask, can this error be avoided?

Page 62: Design Theory - Ankur Sharma - Presentation

Tools

Page 63: Design Theory - Ankur Sharma - Presentation

PENCIL N PAPERUse what you are comfortable with, don’t build sandcastle with

bulldozer

Page 64: Design Theory - Ankur Sharma - Presentation

COMMUNICATEBiggest mistake that can be made is “assumption”

Page 65: Design Theory - Ankur Sharma - Presentation

COLLABORATIVE EDITHelps in iterative documentation and feedback

Page 66: Design Theory - Ankur Sharma - Presentation

Tips

Page 67: Design Theory - Ankur Sharma - Presentation

RESEARCHread, validate, gather information, learn new tricks

Template

Page 68: Design Theory - Ankur Sharma - Presentation

BUILD STORYEvery good design tells stories, what is yours?

Setup Confrontation Resolution

Page 69: Design Theory - Ankur Sharma - Presentation

PRESENTLet them know how awesome your project is. Talk, show and sell

Page 70: Design Theory - Ankur Sharma - Presentation

FUN

Page 71: Design Theory - Ankur Sharma - Presentation

https://www.youtube.com/watch?v=kifMGc5cYuw

Page 72: Design Theory - Ankur Sharma - Presentation

Ankur SharmaDirector/UX

[email protected]

Thanks!