Slajdy do wykładu gamedevowego przedstawionego podczas inauguracji działania Studenckiego Koła Naukowego Twórców Gier Komputerowych Shader na AGH w Krakowie

2. Moje UI

3. Dlaczego UI jest ważny
Interfejs 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.

4. Jest wszędzie,
nie ma od niego ucieczki

6. Również poza światem
maszyn cyfrowych

8. Meet the
User
Design
for
dupa
User

9. zasady

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

11. affordances
affordance – visual clue to the function of object
When simple things need pictures, labels
or instructions, the design has failed.
Donald Norman

12. Zelda
the Ocarina of Time
affordances
in games
Braid

13. spójność
dupa
NIEspójność
• systemy miar • częstotliwość prądu w gniazdku
• format czasu • formaty plików
• strony jezdni • dzień początku tygodnia
• języki narodowe • ...

14. spójność zewnętrzna
‘’Users spend most of their
time on other websites”
‘’The good thing about Jakob Nielsen
standards is that there are so
many of them to choose from”

15. Guidelines
Apple Human Interface Guidelines
http://developer.apple.com/mac/library/documentation/UserExperience/Conceptual/AppleHIGuidelines
Windows User Experience Interaction Guidelines
http://msdn.microsoft.com/en-us/library/aa511440.aspx
GNOME Human Interface Guidelines
http://library.gnome.org/devel/hig-book/stable/

16. spójność wewnętrzna :(

17. spójność wewnętrzna :)

18. konwencje w grach

19. metafora
• pulpit, katalog, pliki
• kosz
• list, koperta, skrzynka pocztowa, znaczek
• kamera / aparat fotograficzny, album ze zdjęciami, fotografia
• lupa
• wózek z zakupami
•…

20. metafora :(

21. metafora ;)

22. metafory w grach
diegetic UI
HUD

23. modes
hard quasi
spring loaded
Modes are a significant source of errors, confusion,
unnecessary restrictions, and complexity in interfaces
Jeff Raskin

24. estetyka
ładny != dobry

25. kiedys vs teraz

26. sztuka vs rzemiosło
„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)

27. koder vs artysta

28. Co z tego, nie trzeba być grafikiem by tworzyć dobre (NIE: ładne) UI
„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)

31. “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

32. customizacja

33. customizacja

34. konsole
monitor telewizor
http://www.gamasutra.com/gdc2004/features/20040326/caminos_01.shtml

35. „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

36. fo n ty czytelność
że czy
)
du
z o
mę
cza
s
UPRASZCZAJ
ze
e pr
stna czy
że
roć to z
p ta
e y
st przecz
tłu to
e w stani
e
ubsteś
Grżeli je
(je
OUTLINES
DUŻE LITERY
duże litery
http://www.gamasutra.com/gdc2004/features/20040326/caminos_01.shtml

37. kursor
kontekstowy
animacje
tooltipsy
on-hover feedback
We must do what the pointer says…

38. one mile high
button
Prawo Fitts’a
magic corners
and borders

39. pie menu
okrągłe menu
kontekstowe

40. Feedback
Reduce the user’s experience of latency (1)
• 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.

41. Feedback
Reduce the user’s experience of latency (2)
• 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

42. 1. Analiza użytkowników
outline of
2. Analiza zadań
UI/UX design
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

43. prototypowanie
• webowe np. Balsamiq, Pencil, Flairbuilder, OmniGraffle
• Flex/Flash
• Powerpoint, Word, Dreamweaver/HTML itd

44. implementacja

45. Immediate
mode GUI
if (Button(10, 10, 100, 20), ”Start”)
{
// handle clicking button
game_started = true;
}
• Video introduction to the concept and discussion
http://www.mollyrocket.com/forums/viewtopic.php?t=134
• Tutorial http://sol.gfxile.net/imgui/

46. Motywacja
User Centered Design
Affordances
Metafory
Spójność
Estetyka i customizacja
Proces tworzenia: testy, prototypowanie
Konkretne porady:
feedback
czytelność
kursor myszki
prawo Fittsa
pie menu
juicyness podsumowanie

47. reading
recommended
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