Zakładki:
Inne moje "rzeczy"
Inne rzeczy
Innych "rzeczy"
Książki
Możliwości i wzorce projektowe
Po godzinach
Rządzą... Gry
Zobacz mnie na GoldenLine
ThinkLab: moja firma

MOJE KSIĄŻKI - AUTOR

Użyteczność w praktyceM. Kasperski, A. Boguska-Torbicz Projektowanie stron WWW. Użyteczność w praktyce, Helion 2008.

Moja książkaM. Kasperski, Sztuczna Inteligencja, Helion 2003.

REDAKTOR MERYTORYCZNY

UmysłD. Casacuberta, Umysł. Czym jest i jak działa, Świat Książki 2007.

100 sposobów...T. Stafford, M. Webb, 100 sposobów na zgłębienie tajemnic umysłu, Onepress 2006.

Istota inteligencjiJ. Hawkins, S. Blakeslee, Istota inteligencji, Onepress 2005.

RSS
wtorek, 30 października 2007

Jak popatrzeć na statystyki, rośnie grupa użytkowników powyżej 40-stego roku życia. Aspekty z projektowaniem rozwiązań dla nich związane są zarówno z przestrzeganiem standardów usability jak i accessibility.

Nie natrafiłem nigdzie w Sieci na opracowanie poświęcone projektowaniu dla osób w podeszłym wieku, więc sam postanowiłem coś w tej mierze napisać. Dzisiaj trochę statystyk i część poświęcona czcionkom.

 

Statystyki

2005 r.: Najwięcej użytkowników w Internecie to osoby w wieku od 15 do 24 lat, których udział wynosi 44,7%. Kolejną co do wielkości grupą są ludzie w średnim wieku: 25-39 lat. Stanowią oni 31,2% populacji użytkowników. Osoby w podeszłym wieku - od 40 do 59 lat - to 22,1% populacji. I wyniki te zamykają osoby po 60 roku życia z 2% udziałem w grupie [wg badań z września-listopada 2005 MillwardBrown SMG/KRC].

2006 r.: Jak pokazuje poniższa tabelka, wyniki rok później były podobne [badania przeprowadził Interaktywny Instytut Badań Rynkowych, źródło: Megapanel PBI/Gemius, październik 2006].

Wyniki badań IIBR.

 

2007 r.: A oto pokazujące wzrost użytkowników w podeszłym wieku o blisko 5%, wyniki badań z okresu marzec/maj bieżącego roku [NetTrack SMG/KRC, za: IDG].

Wyniki badań NetTrack.

 

 

Czcionki

  • Wielkość czcionki: powszechnie uważa się, że treść zasadnicza powinna mieć wielkość przynajmniej 10 punktów (J. Nielsen & H. Loranger, "Optymalizacja funkcjonalności serwisów internetowych", Wyd. Helion 2007, s. 247-249; T. Sachs & G. R. McClain, "Podstawy projektowania stron internetowych", Wyd. Helion 2002, s. 107). Jednak przy tendencji do zwiększającej się rozdzielczości monitorów, na których oglądane są strony WWW, oraz biorąc pod uwagę pogarszający się wzrok osób starszych, jak i fakt, że w późniejszym wieku wzrok szybko się męczy, spokojnie jako standard można przyjąć tekst o wielkości 12 punktów.

  • Szeryfowe czy bezszeryfowe? Co to są szeryfy myślę, że każdy z czytelników UI Design wie, więc nie będę się tutaj wdawał w szczegóły. Osoby, które jednak nie wiedzą odsyłam do artykułu na Wikipedii.

    Powszechna opinia w kwestii stosowania czcionek szeryfowych i bezszeryfowych w Internecie jest taka, że czcionki szeryfowe nie nadają się do czytania z ekranów komputerów, pozostawiając pole do popisu czcionkom bezszeryfowym. To jednak nie jest prawdą.

    Od czasu powstania Internetu dużo się zmieniło. Stosowane kiedyś monitory CRT miały rozdzielczość 72 dpi; aktualnie rozpowszechnione panele LCD mają już rozdzielczość 96 dpi. Co za tym idzie, czcionki wyświetlane na współcześnie stosowanych monitorach są dużo czytelniejsze. Stąd coraz częściej stosuje się w projektach WWW czcionki szeryfowe, których, dzięki podwyższeniu rozdzielczości, czytelność znacznie się poprawiła.

    Co prawda wciąż niektórzy usabiliterzy (Nielsen) radzą wykorzystywać czcionki tylko w nagłówkach (wielkość czcionki 14 punktów i więcej), ale otarłem się gdzieś o opracowanie pokazujące, że z wiekiem zatracają się różnice w czytaniu z ekranów tekstów pisanych czcionką szeryfową i bezszeryfową (tylko źródła tego badania nie mogę sobie przypomnieć), w związku z czym osoby w podeszłym wieku z taką samą sprawnością czytają teksty napisany szeryfami, co bez szeryfów.

  • Wygładzanie krawędzi czcionek (antyaliasing): Safari, bodajże jako jedyna przeglądarka internetowa, w zaawansowany sposób obsługuje antyaliasing. Jeśli wygładzanie krawędzi świetnie sprawdza się w przypadku grafiki, to w przypadku tekstu jest już pomyłką! Tekst z wykorzystaniem opcji wygładzania krawędzi jest znacznie mniej czytelny od tekstu bez obsługi antyaliasingu (Por. W. Williard, "Projektowanie stron WWW", Wyd. Edition 2001, s. 162). Jeśli projektujecie dla użytkowników platformy Apple, miejcie to na uwadze.

    Antyaliasing w Safari.


  • Obrazki zamiast czcionki: NIE! Dlaczego? Bo użytkownicy z większą wadą wzroku nie będą mieli możliwości powiększenia napisów - wyświetlanie czcionki można powiększyć, obrazków nie. No chyba, że się skorzysta z opcji Zoom w przeglądarkach Opera oraz Internet Explorer 7.

    Inną, bardziej zaawansowaną metodą zastępowania czionek, jest sIFR, czyli Scalable Inman Flash Replacement (zob. artykuł na ten temat).

  • Punkty, piksele czy emy? Z interpretacją pikseli w ramach formatowania wielkości czcionki, wciąż ma problem Internet Explorer. Twórcy tej przeglądarki uznali, że stosowanie przez programistów WWW rozmiarów w pikselach, związane jest z określaniem przez nich wartości bezwględnych. W związku z tym tekst sformatowany w pikselach nie podlega możliwości powiększenia. Pozostaje formatowanie tekstu w punktach oraz, coraz częściej stosowane, w em-ach (Por. J. Beaird, "Artystyczne projektowanie stron internetowych", Wyd. Powernet 2007, s. 133-135).

    Nie polecam zaś formatowania czcionek sposobem "kuloodpornym", zaproponowanym przez Dana Cederholma (D. Cederholm, "Kuloodporne strony internetowe", Helion 2006), przy pomocy słów kluczowych, takich jak: small, medium, large. Z moich doświadczeń wynika, że ze względu na niejednolitą interpretację znaczników, stosowaną przez różne przeglądarki internetowe, ten sposób zapisu nie sprawdza się (ale o tym przy innej okazji).

  • Kontrast - o tym przy okazji następnej części, w której będę pisał m.in. o kolorach, pamięci, motoryce.
12:41, marekkasperski
Link Komentarze (8) »
wtorek, 23 października 2007

Okładka: Artystyczne projektowanie.Jak się okazuje, na nową książkę Nielsena nt. eyetrackingu trzeba będzie jeszcze chwilę poczekać (miała być ok. 20 bm., a przełożona jest na połowę grudnia). Za to ukazało się u nas tłumaczenie "The Principles of Beautiful Web Design" (SitePoint, 2007): Jason Beaird, "Artystyczne projektowanie stron internetowych. Przewodnik po etapach projektowania estetycznych stron internetowych".

Z pobieżnego oglądu książka wydaje się być przeznaczona raczej dla początkujących projektantów, chociaż ze względu na to, że akcenty zostały położone na 'PROJEKTOWANIE' oraz 'ESTETYCZNYCH', może okazać się pomocna również dla projektantów z wykształceniem informatycznym, a chcących dokształcić się nieco w tematyce rodem z Akademii Sztuk Pięknych (znajdziemy tu rozdziały nt. kompozycji, kolorach, czy teksturach).

Sporo tu także akcentów wziętych z psychologii Gestalt: co to jest jedność, bliskość, ciągłość i jak kształtować przy pomocy metod graficznych doświadczenie tych wartości u użytkowników.

Darmowy rozdział (do pobrania) niesie dużo więcej treści ze sobą, niż lektura całej "Twórcze projektowanie" (PWN, 2007), sygnowanej nazwiskiem Pawła Tkaczyka (w roli konsultanta).

Reasumując:

  • "Artystyczne projektowanie..." - polecam,
  • "Twórcze projektowanie" - nie polecam,
  • "Eyetracking Web Usability" Nielsena - poczekamy, zobaczymy.
18:24, marekkasperski
Link Komentarze (5) »
czwartek, 18 października 2007
Jak podał dzisiejszy Internet Standard, obchody tegorocznego WUD odbędą się 8 listopada we Wrołcawiu (wstępny program).
19:19, marekkasperski
Link Dodaj komentarz »
niedziela, 14 października 2007

Właśnie siedzę nad projektem sklepu internetowego, dla jednego z klientów, i tak mi przyszło do głowy czy znajdę jakieś materiały w Sieci poświęcone widoczności i czytelności przycisku Dodaj do koszyka. I bingo!

107 Add to Cart Buttons of the Top Online Retailers autorstwa Jasona Billingsleya, to galeria ponad stu przycisków z najczęściej odwiedzanych sklepów anglojęzycznych wraz z analizą statystyczną dotyczącą zarówno nazewnictwa (dla przykładu: Add to Cart to najczęściej używana formuła (58%), a Add to My Shopping Cart najrzadziej (0,9%); jak się okazuje sam Amazon używa niezbyt popularnego Add to Shopping Cart (4,5%)), jak i elementów graficznych przycisków (przykładowo ikona koszyka ma zastosowanie w 14,3% przycisków przeanalizowanych przez Billingsleya).

Galerii i analizom towarzyszy krótki tekst autora.

 

Przyciski Add to Cart.

Rysunek. Część z galerii przycisków z tekstu 107 Add to Cart Buttons....

 

A dlaczego jednolita ikonografia oraz ujednolicone nazewnictwo w ramach 'dodaj koszyka' są tak istotne?

Właściwie funkcja 'dodaj...' jest tym dla świata e-commerce, czym cut (Wytnij ze swoją ikonką nożyczek) dla świata programów desktop - jest powszechna i często wykorzystywana przez użytkowników. Zidentyfikowanie gdzie się znajduje przycisk 'dodaj' w sklepie internetowym oraz zrozumienie funkcji tego przycisku - przy zachowaniu czytelnej formy komunikacji - są jednym z kluczy do sukcesu sklepu.

A może ktoś się pokusi o analizę buttonów w polskich e-sklepach?

 

***

W ramach tematyki buttonów, lekturę uzupełnią dwa teksty:


PS: A tak a propos sklepów internetowych, czy ktoś zapoznał się już z systemem Magento i ma wyrobioną na jego temat swoją opinię? Będę wdzięczny za komentarze w tej sprawie.
19:04, marekkasperski
Link Komentarze (4) »
piątek, 12 października 2007

Jakiś czas temu zakupiłem za 19$ e-book poświęcony projektowaniu stron WWW na telefony komórkowe: Mobile Web Design. Dwa dni temu zaś otrzymałem drugą kopię tej książki, którą z chęcią odstąpię. W związku z tym wymyśliłem, że osoba, która odpowie na nurtujące mnie ostatnio pytanie otrzyma ten właśnie egzemplarz.

Pytanie jest następujące: w systemie Windows występuje kursor move, który oprogramowywany powinien być wówczas, gdy mamy do czyneinie z sytuacją, w której manipuluje się jakimś elementem GUI. Przykładem ze świata Web mogą być boksy z iGoogle, które można przestawiać miejscami, czy też grupowanie w Golden Line wykorzystujące metodę przeciągnij-i-upuść (poniżej na rysunku).

 

Zastosowanie kursora move.

Rysunek 1. Zastosowanie kursora move.

 

Mnie jednak interesuje dlaczego nie został do tego wykorzystany kursor "counting up and down hand", wykorzystany m.in. w ramach poruszania się po google mapach (ale już np. w Zumi - nie), a który wydaje się być w swojej formule znacznie czytelniejszy i bardziej intuicyjny (poniżej na rysunku).

 

Kursor conting up and down hand i jego zastosowanie.

Rysunek 2. Kursor conting up and down hand i jego zastosowanie.

 

Reasumując, pytanie: dlaczego we wszystkich powyższych przypadkach nie jest wykorzystywany kursor counting up and down hand, tylko czasem move?

Osoba, która pierwsza - w ramach systemu komentarzy do tego wpisu - poda prawidłową odpowiedź, albo będzie jej najbliższa (sam mam pewien trop w tej sprawie), otrzyma za darmo egzemplarz e-booka Mobile Web Design.

 

Update z 15 października

W ramach dyskusji, zamieszczam dodatkowe dwa przykłady.

Rysunek u góry to fragment ze strony systemu e-commerce Magento. Mamy tutaj możliwość powiększenia zdjęcia produktu jaki oglądamy w ramach zamkniętej w kwadracie ramki. Do przesuwania powiększonego zdjęcia produktu służy kursor move. Czyli jest to przykład użycia kursora move w ramach przesuwania treści wewnątrz ramki - kontrargument w stosunku do wypowiedzi MLEBKOWSKIego i MARCINAa SZUBY.

Rysunek na dole zaś to fragment interfejsu gry online, w którą można grać przez przeglądarkę WWW "Dark Pirates". Pokazuje on czynność przenoszenia elementu z jednego boksa do drugiego, co jest metaforą dokonywanego handlu surowcami w tejże grze. Czyli jest to przykład użycia kursora move w ramach przesuwania - kontrargument w stosunku do wypowiedzi WOJCIECHa ZAJĄCa.

 

Użycie kursora move w Magento.

Użycie kursora move w grze Dark Pirates.

Rysunek 3. Użycie kursora move w A) Magento oraz B) grze Dark Pirates.

 

19:42, marekkasperski
Link Komentarze (19) »