Moje UI

Dlaczego UI jest ważnyInterfejs jest elementem który decyduje o tym jak aplikacja jest doświadczana, użytkowana i oceniana.

Interfejs wpływa na uczucia i emocje twoich użytkowników.

Może uczynić korzystanie z aplikacji przyjemnością lub koszmarem.

Może przyciągać lub odstraszać użytkowników, wpływając na sprzedaż i zyski.

Jest wszędzie,nie ma od niego ucieczki

Również poza światemmaszyn cyfrowych

Meet the User

dupa

Design for

User

zasady

„A user interface is well-designed when the program behaves exactly how the user thought it would”

Joel Spolsky

affordancesaffordance – visual clue to the function of object

When simple things need pictures, labels or instructions, the design has failed.

Donald Norman

Zeldathe Ocarina of Time

Braid

affordancesin games

spójność

dupa

• systemy miar• format czasu • strony jezdni• języki narodowe

NIEspójność• częstotliwość prądu w gniazdku• formaty plików• dzień początku tygodnia• ...

spójność zewnętrzna

‘’Users spend most of their time on other websites”

Jakob Nielsen ‘’The good thing about standards is that there are so many of them to choose from”

Apple Human Interface Guidelineshttp://developer.apple.com/mac/library/documentation/UserExperience/Conceptual/AppleHIGuidelines

GNOME Human Interface Guidelineshttp://library.gnome.org/devel/hig-book/stable/

Windows User Experience Interaction Guidelines http://msdn.microsoft.com/en-us/library/aa511440.aspx

Guidelines

spójność wewnętrzna :(

spójność wewnętrzna :)

konwencje w grach

metafora• pulpit, katalog, pliki

• kosz • list, koperta, skrzynka pocztowa, znaczek

• kamera / aparat fotograficzny, album ze zdjęciami, fotografia• lupa

• wózek z zakupami• …

metafora :(

metafora ;)

metafory w grach

HUD

diegetic UI

modes

hard quasispring loaded

Modes are a significant source of errors, confusion, unnecessary restrictions, and complexity in interfaces

Jeff Raskin

estetyka

ładny != dobry

kiedys vs teraz

„The mind may be the most important graphic design tool. Aside from technology, graphic design requires judgment and creativity.

Critical, observational, quantitative and analytic thinking are required for design layouts and rendering.”

(Wikipedia EN, Graphic design)

sztuka vs rzemiosło

koder vs artysta

„Visual design is not just about making your application look pretty.Good visual design is about communication.

A well-designed application will make it easy for the user to understand the information that is being presented, and show them clearly how they can interact with that information.

If you can achieve all that, your application will look good to the user, even if it doesn't have any fancy graphics or spinning logos! ”

(GNOME Human Interface Guidelines)

Co z tego, nie trzeba być grafikiem by tworzyć dobre (NIE: ładne) UI

“Juice” was our wet little term for constant and bountiful user feedback. A juicy game element will bounce and wiggle and squirt and make a little noise when you touch it.

A juicy game feels alive and responds to everything you do – tons of cascading action and response for minimal user input.

It makes the player feel powerful and in control of the world, and it coaches them through the rules of the game by constantly letting them know on a per-interaction basis how they are doing.

Kyle Gabler

customizacja

customizacja

konsole

http://www.gamasutra.com/gdc2004/features/20040326/caminos_01.shtml

monitor telewizor

„The keyboard and mouse give you near instant response and near exact control. The controller is a far less precise, far more...well...leisurely input device.”

Warren Spector

czytelność

Grube tłuste

prost

e duże

fonty

(jeżeli jeste

ś w sta

nie to prze

czytać to znaczy że

przemęczasz o

czy)

OUTLINES

http://www.gamasutra.com/gdc2004/features/20040326/caminos_01.shtml

duże literyDUŻE LITERY

UPRASZCZAJ

kursor

We must do what the pointer says…

kontekstowyanimacjetooltipsyon-hover feedback

one mile highbutton

Prawo Fitts’amagic cornersand borders

pie menuokrągłe menu kontekstowe

Feedback

• Acknowledge all button clicks by visual or aural feedback within 50 milliseconds.

• Display an hourglass for any action that will take from 1/2 to 2 seconds. Animate the hourglass so they know the system hasn't died.

• Make the client system beep and give a large visual indication upon return from lengthy (>10 seconds) processes, so that users know when to return to using the system.

Reduce the user’s experience of latency (1)

Feedback• Offer engaging text messages to users informed and entertained

while they are waiting for long processes, such as server saves, to be completed.

• Display a message indicating the potential length of the wait for any action that will take longer than 2 seconds. Communicate the actual length through an animated progress indicator.

.

Bruce Tognazzini http://www.asktog.com/basics/firstPrinciples.html

Reduce the user’s experience of latency (2)

1. Analiza użytkowników

2. Analiza zadań

3. Scenariusze użycia 4. Projekt UI

5. Prototypowanie 6. User testing

7. Uwzględnienie wyników, poprawki

8. If (masz kasę, czas, jest sens) goto 5

9. Implementacja właściwego UI

outline ofUI/UX design

• webowe np. Balsamiq, Pencil, Flairbuilder, OmniGraffle

• Flex/Flash

• Powerpoint, Word, Dreamweaver/HTML itd

prototypowanie

implementacja

Immediate mode GUI

if (Button(10, 10, 100, 20), ”Start”){

// handle clicking buttongame_started = true;

}

• Video introduction to the concept and discussion http://www.mollyrocket.com/forums/viewtopic.php?t=134• Tutorial http://sol.gfxile.net/imgui/

MotywacjaUser Centered Design

Affordances

Metafory

Spójność

Estetyka i customizacja

Proces tworzenia: testy, prototypowanie

Konkretne porady:feedbackczytelność

kursor myszki prawo Fittsa pie menu juicyness podsumowanie

Mój referat ;] na końcu jest też spora bibliografia m.in:

Don’t Make Me Think, Steve Krug

User Interface Design For Programmers, Joel Spolsky

Designing Interfaces, Jenifer Tidwel

Design of everyday things, Donald Norman

www.sknshader.pl , www.koshmaar.pl

→

prezentacja i referat do ściągnięcia

recomm

ended reading