1
dashboardy, modele mentalne i mikrointerakcje - efektywne systemy dla power userów Maciej Płonka, Hubert Turaj, EDISONDA InternetBeta 2013
2
czym jest system?
3
http://en.wikipedia.org/wiki/SAP_AG, http://www.iii-lo.tarman.pl/informatyka/ladustrone.php?p1=informatyka&p2=5
4
http://en.wikipedia.org/wiki/SAP_AG, http://www.iii-lo.tarman.pl/informatyka/ladustrone.php?p1=informatyka&p2=5
"System" w stosunku do narzędzia, aplikacji
5
Potrzeby i cele różnych aktorów w systemie
6
https://www.iconfinder.com/icons/174880/database_icon
Obsługa danych
7
Podczerwień Badania eye tracking
8
przebadaliśmy ok. 5 000 power userów
9
jaki jest dobry interfejs systemu?
10
szybki
13
http://qcadoo.com/pl/
Zróżnicowane opcje zapisu przyspieszające czynności powtarzalne
14
15
Zbyt duża odległość między etykietami i polami spowalniająca korzystanie z formularza
16
Zbyt duża odległość między danymi a narzędziem ich edycji spowalniająca korzystanie z narzędzia
17
18
Tooltip w wierszu przyspieszający dotarcie do szczegółowych informacji o rekordzie
19
Bardzo długa lista pozycji spowalniająca wybór pozycji
20
Inteligentne combo box - wpisywanie i wyszukiwanie przyspieszające wybór pozycji
23
http://vitalets.github.io/x-editable/demo.html
Edycja inline w tabeli przyspieszająca edycję danych
24
Please wait
25
Please wait Szybkość działania samego
systemu
26
dostęp do informacji
27
Źródła dashboardów
28
http://www.ing.pl/
Dostęp do narzędzi, jednak bez informacji nie jest to dashboard
29
http://www.orange.pl/
Dostęp do narzędzi, jednak bez informacji nie jest to dashboard
30 Dashboard zawiera w sobie..
1. Najważniejsze informacje, podsumowanie
2. Główną akcję
3. Alerty, komunikaty priorytetowe
34
HOTAS
35
Hands-On-Throttle-And-Stick
36
http://www.advancetec.co.uk/thrustmaster-hotas-warthog-joystick-and-throttle.html
Natychmiastowy dostęp do najważniejszych funkcji
37
przewidywalny i zrozumiały
38
model mentalny
39
Wyobrażony zakres wyszukiwania
Użytkownik
Użytkownik
Użytkownik
Zakres działania wyszukiwarki
Użytkownik Użytkownik
Błędny model mentalny - użytkownik twierdzi, że narzędzie umożliwi mu wykonanie czynności poza prawdziwym jego zakresem
Użytkownik
40
Zakres działania wyszukiwarki =
wyobrażony zakres działania wyszukiwarki
Użytkownik
Użytkownik
Użytkownik
Użytkownik
Użytkownik Użytkownik
Poprawny model mentalny - wyobrażenie użytkownika pokrywa się z zakresem działania narzędzia
41
http://www.webrobi.pl/
Przeciągnij-i-upuść - użytkownicy nie wykorzystują narzędzia, model mentalny wskazuje na konieczność klikania w elementy (symbole
rombów), nie ich przeciąganie
42
http://qcadoo.com/pl/
Dodanie i zapisanie podstawowych informacji jest wymagane do dodania informacji zaawansowanych, model mentalny użytkowników
podpowiada, ze czynności te są równoległe (logika kart)
43
http://mail.google.com/?hl=pl
Zaznaczanie elementów na liście - wszystkie pozycje czy tylko widoczne?
44
http://mail.google.com/?hl=pl
Jasna informacja o dwojakiej możliwości zaznaczenia pozycji na liście
45
pomocny
46
mikrointerakcje
47
http://www.umpcportal.com/gallery/v/iphone_4/iphone+4+volume+controls+and+silent+switch.jpg.html?g2_imageViewsIndex=2
Mikrointerakcje to nie kluczowa funkcjonalność, ale element znacząco wpływający na jakość korzystania z narzędzia - przykład narzędzia
wyciszania dzwonka telefonu
48
Skórka
Układ
Logika
Mikrointerakcje znajdują się między warstwą wizualną a układem interfejsu
http://www.amazon.com/Microinteractions-Designing-Details-Dan-Saffer/dp/144934268X
49
Informacja zwrotna jako mikrointerakcja
52
http://www.amazon.com/
Problem "znikającego menu" przy przejściu kursora nad innym odnośnikiem
53
http://www.amazon.com/
Zdefiniowany obszar, w ramach którego menu drugiego poziomu nie jest zamykane
54
progressive reduction
55
W pełni opisany przycisk przy pierwszym uruchomieniu systemu
56
Element jest z czasem upraszczany - krzywa uczenia się
57
Proces jest cofany, jeśli użytkownik przestaje korzystać z elementu
58
Wykorzystanie kart i opcji manipulowania nimi
59
Ikona informująca o dodanych załącznikach http://mail.google.com/?hl=pl
60
http://mail.google.com/?hl=pl
Ikona informująca o dodanych załącznikach
61
System sugeruje użytkownikowi płacenie od najstarszej faktury
62
da się lubić
63
http://www.getharvest.com/
System powinien być ludzki, czasem śmieszyć, relaksować
64
http://www.getharvest.com/
System informuje użytkownika o zmianie daty od ostatniego użycia narzędzia
65
http://www.campaignmonitor.com/
Etykieta przycisku dodawania użytkownika do systemu zawiera jego imię
66
Drobne zagięcie karty informuje użytkownika, że nie sprawdził on jeszcze jej zawartości
67
http://superuseless.blogspot.com/2008/06/13th-bullet-bulletproof.html
68
trochę inne usability
69
inne zasady użyteczności dla power userów
70
Wsparcie mile widziane przez początkujących użytkowników, irytujące dla zaawansowanych
https://www.proama.pl/
71
Potwierdzanie krytycznych czynności - zabezpieczenie dla użytkowników początkujących,
irytujące gdy zbyt częste dla zaawansowanych https://github.com/
72
szybki przewidywalny i zrozumiały pomocny da się lubić