„Aplikacje dla ludzi” –...
44
1 © Rule Financial 2013 „Aplikacje dla ludzi” – projektowanie interfejsu użytkownika Andrzej Matłosz Rule Financial
Transcript of „Aplikacje dla ludzi” –...
1 © Rule Financial 2013
„Aplikacje dla ludzi” – projektowanie
interfejsu użytkownika
Andrzej Matłosz
Rule Financial
2 © Rule Financial 2013
"Aplikacje dla ludzi”- projektowanie interfejsu użytkownika
Andrzej Matłosz IT Academic Day Uniwersytet Ekonomiczny w Poznaniu 04.12.2013
3 © Rule Financial 2013
Plan prezentacji
Jak naprawdę użytkownik korzysta z internetu
Niezbędne elementy w projektowaniu
Zasady projektowania formularzy
Kilka prostych zasad na temat tekstu
Testowanie
Dopasowanie aplikacji do różnych rozdzielczości
4 © Rule Financial 2013
Jak naprawdę użytkownik korzysta z internetu
5 © Rule Financial 2013
Jak naprawdę użytkownik korzysta z internetu
6 © Rule Financial 2013
Jak naprawdę użytkownik korzysta z internetu
7 © Rule Financial 2013
Jak naprawdę użytkownik korzysta z internetu
Nie czytamy stron internetowych- przeglądamy je
Nie wybieramy optymalnie, zadowalamy się znalezionymi opcjami
Nie myślimy jak coś działa, tylko sobie z tym radzimy
8 © Rule Financial 2013
Niezbędne elementy w projektowaniu
9 © Rule Financial 2013
Niezbędne elementy w projektowaniu
Hierarchia elementów
Pokaż do jakiej kategorii należy dany przedmiot/strona
10 © Rule Financial 2013
Niezbędne elementy w projektowaniu
Hierarchia czynności- pokaż gdzie jesteś i dokąd zmierzasz
11 © Rule Financial 2013
Niezbędne elementy w projektowaniu- Konwencje
Logo- górny lewy róg, link do strony głównej
12 © Rule Financial 2013
Niezbędne elementy w projektowaniu- Konwencje
Ustaw kursor tam gdzie trzeba
13 © Rule Financial 2013
Niezbędne elementy w projektowaniu- Konwencje
Pokaż w co można kliknąć
14 © Rule Financial 2013
Niezbędne elementy w projektowaniu- Konwencje
Pokaż w co można kliknąć
15 © Rule Financial 2013
Niezbędne elementy w projektowaniu- Konwencje
Pokaż to co jest najważniejsze
16 © Rule Financial 2013
Niezbędne elementy w projektowaniu- Konwencje
Pokaż to co jest najważniejsze
17 © Rule Financial 2013
Niezbędne elementy w projektowaniu- Konwencje
Pokaż to co jest najważniejsze
18 © Rule Financial 2013
Niezbędne elementy w projektowaniu- Konwencje
Ogranicz chaos
19 © Rule Financial 2013
Zasady projektowania formularzy
20 © Rule Financial 2013
Zasady projektowania formularzy
Pokaż drogę do zakończenia
21 © Rule Financial 2013
Zasady projektowania formularzy
Grupuj pola
22 © Rule Financial 2013
Zasady projektowania formularzy
Zadbaj o klikalne etykiety
23 © Rule Financial 2013
Zasady projektowania formularzy
Używaj właściwych kontrolek
24 © Rule Financial 2013
Zasady projektowania formularzy
Pokazuj tylko to co niezbędne
25 © Rule Financial 2013
Zasady projektowania formularzy
Sortuj listy, comboboxy, gridy. Pozwalaj sortować tam gdzie to możliwe
26 © Rule Financial 2013
Zasady projektowania formularzy
Stosując stronicowanie, pozwalaj dowolnie po nim nawigować
27 © Rule Financial 2013
Zasady projektowania formularzy
Pokaż wymagane pola
28 © Rule Financial 2013
Zasady projektowania formularzy
Pokaż format danych
29 © Rule Financial 2013
Zasady projektowania formularzy
Wyjaśniaj wątpliwości poprzez pomoc kontekstową
30 © Rule Financial 2013
Zasady projektowania formularzy
Informuj o błędach
31 © Rule Financial 2013
Zasady projektowania formularzy
Ustaw dobre wartości domyślne
32 © Rule Financial 2013
Zasady projektowania formularzy
Pamiętaj, że użytkownik „nie czyta”
33 © Rule Financial 2013
Zasady projektowania formularzy
Pamiętaj o potwierdzeniu akcji użytkownika (zwłaszcza używając AJAX)
34 © Rule Financial 2013
Zasady projektowania formularzy
Stosujmy naturalne udogodnienia, powiadamianie za pomocą animacji
35 © Rule Financial 2013
Kilka prostych zasad na temat tekstu
36 © Rule Financial 2013
Kilka prostych zasad na temat tekstu
Wyjustowanie tekstu
Czytelne akapity (odpowiednie odstępy między akapitami)
Odstępy między wierszami
Gramatyka, interpunkcja, ortografia
Moja stara piła leży w piwnicy
Moja stara piła, leży w piwnicy
Pogrubiony wstęp (streszczenie)
Zróżnicowana wielkość czcionki w nagłówkach
Copywriting
37 © Rule Financial 2013
Testowanie
38 © Rule Financial 2013
Testowanie
http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
39 © Rule Financial 2013
Testowanie
Różne sposoby przeprowadzania testów:
Ankiety
Przeprowadzanie wywiadów
Storyboards
Prototypowanie, użycie wireframes
Testy A/B
40 © Rule Financial 2013
Dopasowanie aplikacji do różnych rozdzielczości
41 © Rule Financial 2013
Dopasowanie aplikacji do różnych rozdzielczości
Aplikacje desktopowe- wykorzystanie odpowiednich menadżerów rozkładu
Przykład użycia menadżerów rozkładu w WPF
http://www.codeproject.com/Articles/140613/WPF-Tutorial-Layout-Panels-Containers-
Layout-Trans
42 © Rule Financial 2013
Dopasowanie aplikacji do różnych rozdzielczości
Aplikacje webowe- css, wykorzystanie gotowych frameworków (Bootstrap, Foundation)
Przykład z wykorzystaniem Foundation Framework
https://www.simple-talk.com/dotnet/asp.net/responsive-design-using-foundation-with-
asp.net-mvc/
44 © Rule Financial 2013
„Aplikacje dla ludzi” – projektowanie
interfejsu użytkownika
Andrzej Matłosz
Rule Financial
