Projektowanie UI - Hubert Rutkowski

3,249 views
3,195 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,249
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×