20 percent tips

UI Best Practice

This is a training

What is Interface?Good Interfaces Main PrinciplesDesign Process StepsInterface development 2.5 h Current ProjectsTips and RecommendationsPrototype Your App (fast exercise) coffee break 15 minInterfaces 1.5 h

What is interface?

The way that you accomplish tasks with a productwhat you do and how it respondsthat's the interface.

Jeff Raskin the Humane Interface

Interfaces around you...

Usually interfaces are very evident to use

But sometimes they are not so evident

Donal Norman's book The Design of Everyday Things provides some more examples

http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107

Human-Computer Interface

Originally software interfaces showed too many features.In addition you cannot receive natural feedback (opposite to physical objects)

Interface tax when you have to interact with interface but not for reaching your objective.The term by Alan Cooper, the famous interface designer

To create good interfaces we should strive to minimize interface taxes.

The most important things...

MoneyTyped dataTime

Good Interfaces Main Principles

1. Simple Mental Model

WYSIWYG

2. Easy to Reach Essential Functions

Some complex operations may require complicated interfaces,
however simple operations should have simple interface.Compare Gmail and Microsoft Word interfaces for typing.

Hide not essential functions.

3. Enough Information

Neither lack no overload. User should receive enough information about system state, tickets availability, goods prices, feature and delivery options, etc.

4. Immediate Responce

Highlighted LinksProgress bars

Immediate search results

5. Forming Habits, Well-Known Hotkeys

All professional software forms habits. Adobe Photoshop is a good example.

Google Calendar provides Alt/Opt+S for Save an event (instead of prevalent Ctrl/Cmd+S). This is a bad example.

6. Remember Your Preferences

Yes Chrome shows most visited (ie preferrable) pages

7. Easy to undo

Humanes can make mistake. If you cannot undo it is awful.

Summary

Simple Mental Model

Easy to Reach Essencial Functions

Enough Information

Immediate response

Forming Habits

Remember Your Preferences

Easy to Undo

UI centric solution implementation steps

Projects

Navigation Tree

OPF Configurator

Mobile Client for BlackBerry (prototype)

Optimistic Lock (bunch of functions)

Reference Selector & Fast search

Search

Search Profiles

Connectivity Wizard

Order Entry Module

Portals

Tips and Recommendations

What to improve you interface?
Some tips

What is the main function in the screen?

Is this function available?

Can it be better? Sure it can. How?

Look at good principles list and check.

Make it visually cleaner.

Check if your interface forms habits

Same elements behaior should be consistent in diffenent modules

look&feel

Colors palette, Icons,

Consistency

Forms

Luc Wroblewski wrote the best book about forms

Make Primary Buttons Prominent

Gfoogle wants to get your mobile phone number.Who can find the button to skip this step?

To read

Edward TufteThe Visual display of Quantitive InformationJef RaskinThe Humane InterfaceAlan Cooper
About Face

2011 NetCracker Technology Corp. Confidential.

6/9/13


6/9/13

Click to edit Master title style


Click to edit Master text styles

Second level

Third level

Fourth level

Fifth level

6/9/13


6/9/13

2011 NetCracker Technology Corp. Confidential.6/9/13 Click to edit Master title style



Second level

Third level

Fourth level

Fifth level


6/9/13 Click to edit Master title style


Second level

Third level

Fourth level

Fifth level

6/9/13


6/9/13

Thank you!

2011 NetCracker Technology Corp. Confidential.6/9/13