Projektowanie UI - Hubert Rutkowski
Upcoming SlideShare
Loading in...5
×
 

Projektowanie UI - Hubert Rutkowski

on

  • 3,267 views

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

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

Statistics

Views

Total Views
3,267
Views on SlideShare
1,944
Embed Views
1,323

Actions

Likes
0
Downloads
5
Comments
0

10 Embeds 1,323

http://www.sknshader.pl 481
http://student.agh.edu.pl 349
http://www.hubert-rutkowski.pl 226
http://hubert-rutkowski.pl 104
http://www.koshmaar.pl 93
http://koshmaar.pl 46
http://koshmaar.linuxpl.info 12
http://www.shader.agh.edu.pl 9
http://translate.googleusercontent.com 2
https://s1-eu3.ixquick-proxy.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Projektowanie UI - Hubert Rutkowski Projektowanie UI - Hubert Rutkowski Presentation Transcript

  • Moje UI
  • 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.
  • 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” Joel Spolsky
  • affordances affordance – visual clue to the function of object When simple things need pictures, labels or instructions, the design has failed. Donald Norman
  • Zelda the Ocarina of Timeaffordancesin games Braid
  • 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 • ...
  • 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”
  • 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/
  • 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 diegetic UIHUD
  • modes hard quasi spring loadedModes are a significant source of errors, confusion,unnecessary restrictions, and complexity in interfaces Jeff Raskin
  • estetykaładny != dobry
  • kiedys vs teraz
  • 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)
  • koder vs artysta
  • 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)
  • “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
  • customizacja
  • customizacja
  • konsole monitor telewizorhttp://www.gamasutra.com/gdc2004/features/20040326/caminos_01.shtml
  • „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
  • 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
  • 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 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.
  • 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
  • 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
  • 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”) { // 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/
  • MotywacjaUser Centered DesignAffordancesMetaforySpójnośćEstetyka i customizacjaProces tworzenia: testy, prototypowanieKonkretne porady: feedback czytelność kursor myszki prawo Fittsa pie menu juicyness podsumowanie
  • 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