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

11

http://qcadoo.com/pl/

12

http://qcadoo.com/pl/

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

21

http://vitalets.github.io/x-editable/demo.html

22

http://vitalets.github.io/x-editable/demo.html

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

31

http://dontpay.pl

Podstawowe elementy dashboardu

32

http://dontpay.pl

Główne akcje

33

http://dontpay.pl

Najważniejsze informacje

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

50

http://www.amazon.com/

Użytkownik zainteresowany książkami

51

http://www.amazon.com/

Rozwinięcie się menu drugiego poziomu

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ć

73

cześć, i dzięki za ryby

maciej@edisonda.pl

hubert@edisonda.pl