Marcin Stefaniak, Lemod Demon

1. Nie każ mi myśleć.
Użyteczność serwisów internetowych.
Marcin Stefaniak
Lemon Demon Sp. z o.o.

2. Czym usability jest, a czym nie jest?

3. Czym usability jest, a czym nie jest?
Używalność

4. Czym usability jest, a czym nie jest?
Używalność
Dostępność

5. Czym usability jest, a czym nie jest?
Używalność
Dostępność
Standard

6. Czym usability jest, a czym nie jest?
Używalność
Dostępność
Standard
Użyteczność

7. Test 5-sekundowy

9. Co sprzedaje ta firma?

10. Nawigacja

11. Unikaj udziwnień

12. Teraz lepiej?

13. Co mogę kliknąć?

17. 2 sekundy

18. 2 sekundy
3 kliki

19. 2 sekundy
3 kliki
7 +/- 2

20. Typografia

21. Szeryfowe czy bezszeryfowe?

22. Szeryfowe czy bezszeryfowe?
Szeryfowe - dobre dla druku;
300-600 dpi vs 90-120 dpi.

23. Szeryfowe czy bezszeryfowe?
Szeryfowe - dobre dla druku;
300-600 dpi vs 90-120 dpi.
Lepiej Georgia niż Times New Roman

24. Szeryfowe czy bezszeryfowe?
Szeryfowe - dobre dla druku;
300-600 dpi vs 90-120 dpi.
Lepiej Georgia niż Times New Roman
Szeryf w nagłówkach - jak najbardziej.
Duża czcionka na pewno będzie czytelna.

25. Wielkość MA znaczenie

26. Wielkość MA znaczenie
Czcionka nie może być mała, szczególnie gdy strona
kierowana jest do dzieci lub seniorów

27. Czym większy kontrast, tym lepiej.

28. Czym większy kontrast, tym lepiej.
Optymalnie czarny tekst
na białym tle

30. TEKST PISANY WIELKIMI LITERAMI JEST CZYTANY O
10% WOLNIEJ
regulaminy? kto to wymyślił?

31. Czerwony czy zielony?
8% mężczyzn i 0.5% kobiet ma daltonizm częściowy
- nie odróżnia czerwonego od zielonego

32. Bałagan na stronie
jest wprost proporcjonalny
do ilości użytych czcionek

33. Formularze

34. Klucz do trumny
czy gwóźdź do sukcesu?

35. Upewnij się, że użytkownicy potrafią wypełnić twój
formularz.

36. Upewnij się, że użytkownicy potrafią wypełnić twój
formularz.
Nie zbieraj nadmiarowych danych.

37. Upewnij się, że użytkownicy potrafią wypełnić twój
formularz.
Nie zbieraj nadmiarowych danych.
Nie wymagaj rejestracji, jeśli nie jest naprawdę niezbędna
($300 mln button).

38. Upewnij się, że użytkownicy potrafią wypełnić twój
formularz.
Nie zbieraj nadmiarowych danych.
Nie wymagaj rejestracji, jeśli nie jest naprawdę niezbędna
($300 mln button).
Dodaj wyjaśnienia i przykłady przy mniej oczywistych
pozycjach.

39. Zadbaj o czytelne komunikaty błędów

41. Content is king

42. Internauci szukają przede wszystkim wartościowej
treści i ...

43. Internauci szukają przede wszystkim wartościowej
treści i ... są niecierpliwi.

44. Internauci szukają przede wszystkim wartościowej
treści i ... są niecierpliwi.
Wstęp i rozwinięcie - oszczędzaj ich czas.

45. Internauci szukają przede wszystkim wartościowej
treści i ... są niecierpliwi.
Wstęp i rozwinięcie - oszczędzaj ich czas.
Odwrócona piramida - najpierw "nagroda"

46. Kto lubi długie wywody?

48. Ludzie skanują - nie czytają.

49. Ludzie skanują - nie czytają.
Tekst się nie mieści? Przeredaguj!

50. Ludzie skanują - nie czytają.
Tekst się nie mieści? Przeredaguj!
Przykuj uwagę! Nagłówki, śródtytuły, wytłuszczenia, krótkie
akapity, wypunktowania.

51. Ludzie skanują - nie czytają.
Tekst się nie mieści? Przeredaguj!
Przykuj uwagę! Nagłówki, śródtytuły, wytłuszczenia, krótkie
akapity, wypunktowania.
Dodaj "przestrzeni" - line-height (1.48em), odstępy między
paragrafami, ograniczona długość linii (55-75 znaków).

52. Ludzie skanują - nie czytają.
Tekst się nie mieści? Przeredaguj!
Przykuj uwagę! Nagłówki, śródtytuły, wytłuszczenia, krótkie
akapity, wypunktowania.
Dodaj "przestrzeni" - line-height (1.48em), odstępy między
paragrafami, ograniczona długość linii (55-75 znaków).
Dziel na sekcje, stronicuj (czytelna nawigacja)

54. Layout is ... queen?

55. Tak, ludzie oceniają książkę po okładce.

56. Tak, ludzie oceniają książkę po okładce.
Czystość / przejrzystość

57. Tak, ludzie oceniają książkę po okładce.
Czystość / przejrzystość
Układ - znane rozwiązania

58. Tak, ludzie oceniają książkę po okładce.
Czystość / przejrzystość
Układ - znane rozwiązania
Jasne call-to-action

59. Tak, ludzie oceniają książkę po okładce.
Czystość / przejrzystość
Układ - znane rozwiązania
Jasne call-to-action
Dobry wygląd == zaufanie

60. Butik czy ciuchbuda?

61. Single/Multi-Page Checkout (ABtests.com)

63. Conversion Rate +21,8%

64. JavaScript & Flash

65. Javascript / AJAX

66. Javascript / AJAX
Używać, ale z głową.

67. Javascript / AJAX
Używać, ale z głową.
AJAX jest super!

68. Javascript / AJAX
Używać, ale z głową.
AJAX jest super (przynajmniej z punktu widzenia usability).

69. Javascript / AJAX
Używać, ale z głową.
AJAX jest super (przynajmniej z punktu widzenia usability).
Pamiętaj o historii i nawigowaniu klawiaturą.

70. Javascript / AJAX
Używać, ale z głową.
AJAX jest super (przynajmniej z punktu widzenia usability).
Pamiętaj o historii i nawigowaniu klawiaturą.
Framework'i - lek na różnice w przeglądarkach.

71. Javascript / AJAX
Używać, ale z głową.
AJAX jest super (przynajmniej z punktu widzenia usability).
Pamiętaj o historii i nawigowaniu klawiaturą.
Framework'i - lek na różnice w przeglądarkach.
Animuj zmiany - oko reaguje na ruch.

72. Javascript / AJAX
Używać, ale z głową.
AJAX jest super (przynajmniej z punktu widzenia usability).
Pamiętaj o historii i nawigowaniu klawiaturą.
Framework'i - lek na różnice w przeglądarkach.
Animuj zmiany - oko reaguje na ruch.
Pokazuj akcje - spinner.

73. Flash to zło ...

74. Flash to zło ...
... jeśli twoje ręce leczą

75. Flash to zło ...
... jeśli twoje ręce (ka)leczą

76. Komu potrzebne jest intro?

77. Komu potrzebne jest intro?
Postęp ładowania.

78. Komu potrzebne jest intro?
Postęp ładowania.
Przerost formy nad treścią.

79. Komu potrzebne jest intro?
Postęp ładowania.
Przerost formy nad treścią.
Kopiowanie/drukowanie/powiększanie tekstu.

80. Komu potrzebne jest intro?
Postęp ładowania.
Przerost formy nad treścią.
Kopiowanie/drukowanie/powiększanie tekstu.
Optymalizuj - czas ładowania, obciążenie procesora.

81. Komu potrzebne jest intro?
Postęp ładowania.
Przerost formy nad treścią.
Kopiowanie/drukowanie/powiększanie tekstu.
Optymalizuj - czas ładowania, obciążenie procesora.
Flash Player - nie każdy ma najnowszego!

83. Zacznij od projektu

84. Zacznij od projektu
iteruj

85. Zacznij od projektu
iteruj
testuj

86. Zacznij od projektu
iteruj
testuj
poprawiaj

88. Narzędzia / bibliografia
abtests.com
fivesecondtest.com
"The Smashing Book", smashingmagazine.com
"Prioritizing Web Usability" - J.Nielsen, H.Loranger
"Don't Make Me Think" - Steve Krug