Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Moje UI
Dlaczego UI jest ważny          Interfejs jest elementem który decyduje o          tym jak aplikacja jest doświadczana,   ...
Jest wszędzie,nie ma od niego ucieczki
Również poza światemmaszyn cyfrowych
Meet the User Design   for  dupa  User
zasady
„A user interface is well-designedwhen the program behaves exactlyhow the user thought it would”                          ...
affordances        affordance – visual clue to the function of object       When simple things need pictures, labels      ...
Zelda    the Ocarina of Timeaffordancesin games                          Braid
spójność dupaNIEspójność  • systemy miar      • częstotliwość prądu w gniazdku  • format czasu      • formaty plików  • st...
spójność zewnętrzna                          ‘’Users spend most of their                             time on other website...
Guidelines           Apple Human Interface Guidelines           http://developer.apple.com/mac/library/documentation/UserE...
spójność wewnętrzna :(
spójność wewnętrzna :)
konwencje w grach
metafora • pulpit, katalog, pliki • kosz • list, koperta, skrzynka pocztowa, znaczek • kamera / aparat fotograficzny, albu...
metafora :(
metafora ;)
metafory w grach                   diegetic UIHUD
modes         hard                          quasi                                    spring loadedModes are a significant ...
estetykaładny != dobry
kiedys   vs   teraz
sztuka vs rzemiosło„The mind may be the most important graphic designtool. Aside from technology, graphic design requiresj...
koder   vs   artysta
Co z tego, nie trzeba być grafikiem by tworzyć dobre (NIE: ładne) UI„Visual design is not just about making your applicati...
“Juice” was our wet little term for constant and bountiful userfeedback. A juicy game element will bounce and wiggle and s...
customizacja
customizacja
konsole          monitor                                 telewizorhttp://www.gamasutra.com/gdc2004/features/20040326/camin...
„The keyboard and mouse give you near instantresponse and near exact control. The controller is a farless precise, far mor...
fo n ty   czytelność                                       że                             czy                             ...
kursorkontekstowyanimacjetooltipsyon-hover feedback                    We must do what the pointer says…
one mile highbutton                Prawo Fitts’amagic cornersand borders
pie menu   okrągłe menu   kontekstowe
FeedbackReduce the user’s experience of latency (1)• Acknowledge all button clicks by visual or aural feedback within 50  ...
Feedback    Reduce the user’s experience of latency (2)• Offer engaging text messages to users informed and entertained  w...
1. Analiza użytkowników                                     outline of2. Analiza zadań                                    ...
prototypowanie• webowe np. Balsamiq, Pencil, Flairbuilder, OmniGraffle• Flex/Flash• Powerpoint, Word, Dreamweaver/HTML itd
implementacja
Immediate                                            mode GUI          if (Button(10, 10, 100, 20), ”Start”)          {   ...
MotywacjaUser Centered DesignAffordancesMetaforySpójnośćEstetyka i customizacjaProces tworzenia: testy, prototypowanieKonk...
reading                                                            recommendedMój referat ;] na końcu jest też spora bibli...
Projektowanie UI - Hubert Rutkowski
Projektowanie UI - Hubert Rutkowski
Projektowanie UI - Hubert Rutkowski
Projektowanie UI - Hubert Rutkowski
Projektowanie UI - Hubert Rutkowski
Projektowanie UI - Hubert Rutkowski
Upcoming SlideShare
Loading in …5
×

Projektowanie UI - Hubert Rutkowski

3,380 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

Projektowanie UI - Hubert Rutkowski

  1. 1. Moje UI
  2. 2. 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.
  3. 3. Jest wszędzie,nie ma od niego ucieczki
  4. 4. Również poza światemmaszyn cyfrowych
  5. 5. Meet the User Design for dupa User
  6. 6. zasady
  7. 7. „A user interface is well-designedwhen the program behaves exactlyhow the user thought it would” Joel Spolsky
  8. 8. affordances affordance – visual clue to the function of object When simple things need pictures, labels or instructions, the design has failed. Donald Norman
  9. 9. Zelda the Ocarina of Timeaffordancesin games Braid
  10. 10. spójność dupaNIEspójność • systemy miar • częstotliwość prądu w gniazdku • format czasu • formaty plików • strony jezdni • dzień początku tygodnia • języki narodowe • ...
  11. 11. 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”
  12. 12. Guidelines Apple Human Interface Guidelines http://developer.apple.com/mac/library/documentation/UserExperience/Conceptual/AppleHIGuidelinesWindows 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/
  13. 13. spójność wewnętrzna :(
  14. 14. spójność wewnętrzna :)
  15. 15. konwencje w grach
  16. 16. metafora • pulpit, katalog, pliki • kosz • list, koperta, skrzynka pocztowa, znaczek • kamera / aparat fotograficzny, album ze zdjęciami, fotografia • lupa • wózek z zakupami •…
  17. 17. metafora :(
  18. 18. metafora ;)
  19. 19. metafory w grach diegetic UIHUD
  20. 20. modes hard quasi spring loadedModes are a significant source of errors, confusion,unnecessary restrictions, and complexity in interfaces Jeff Raskin
  21. 21. estetykaładny != dobry
  22. 22. kiedys vs teraz
  23. 23. sztuka vs rzemiosło„The mind may be the most important graphic designtool. Aside from technology, graphic design requiresjudgment and creativity.Critical, observational, quantitative and analytic thinkingare required for design layouts and rendering.” (Wikipedia EN, Graphic design)
  24. 24. koder vs artysta
  25. 25. 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 tounderstand the information that is being presented, and show themclearly how they can interact with that information.If you can achieve all that, your application will look good to the user,even if it doesnt have any fancy graphics or spinning logos! ” (GNOME Human Interface Guidelines)
  26. 26. “Juice” was our wet little term for constant and bountiful userfeedback. A juicy game element will bounce and wiggle and squirtand 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 constantlyletting them know on a per-interaction basis how they are doing. Kyle Gabler
  27. 27. customizacja
  28. 28. customizacja
  29. 29. konsole monitor telewizorhttp://www.gamasutra.com/gdc2004/features/20040326/caminos_01.shtml
  30. 30. „The keyboard and mouse give you near instantresponse and near exact control. The controller is a farless precise, far more...well...leisurely input device.” Warren Spector
  31. 31. 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 literyhttp://www.gamasutra.com/gdc2004/features/20040326/caminos_01.shtml
  32. 32. kursorkontekstowyanimacjetooltipsyon-hover feedback We must do what the pointer says…
  33. 33. one mile highbutton Prawo Fitts’amagic cornersand borders
  34. 34. pie menu okrągłe menu kontekstowe
  35. 35. FeedbackReduce 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 hasnt 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.
  36. 36. 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
  37. 37. 1. Analiza użytkowników outline of2. Analiza zadań UI/UX design3. Scenariusze użycia4. Projekt UI5. Prototypowanie6. User testing7. Uwzględnienie wyników,poprawki8. If (masz kasę, czas, jest sens)goto 59. Implementacja właściwego UI
  38. 38. prototypowanie• webowe np. Balsamiq, Pencil, Flairbuilder, OmniGraffle• Flex/Flash• Powerpoint, Word, Dreamweaver/HTML itd
  39. 39. implementacja
  40. 40. Immediate mode GUI if (Button(10, 10, 100, 20), ”Start”) { // handle clicking button game_started = true; }• Video introduction to the concept and discussionhttp://www.mollyrocket.com/forums/viewtopic.php?t=134• Tutorial http://sol.gfxile.net/imgui/
  41. 41. MotywacjaUser Centered DesignAffordancesMetaforySpójnośćEstetyka i customizacjaProces tworzenia: testy, prototypowanieKonkretne porady: feedback czytelność kursor myszki prawo Fittsa pie menu juicyness podsumowanie
  42. 42. reading recommendedMó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

×