Projekt strony internetowej inspirowany Edwardem Tufte

Source: http://staff.washington.edu/larryg/Classes/Rinflux/zz-influx.html

(P) Jakie zagadnienia z prac Edwarda Tufte są istotne w przypadku witryny internetowej?

Kwestie, które uważam za najbardziej istotne, to:

  • Nośniki wyjściowe: autorzy tekstów papierowych znają swoje docelowe nośniki, ale treść internetowa może być renderowana na radykalnie różnych urządzeniach pod względem rozmiaru, rozdzielczości, a nawet rodzaju samego nośnika (wysokiej klasy stacje robocze, małe laptopy, urządzenia PDA, alfabet Braille’a, słowa mówione itp. )
  • Oczekiwania użytkowników: Użytkownicy sieci podchodzą do informacji inaczej niż na papierze i chętniej skanują informacje niż je czytają
  • Ergonomia: obecna technologia przeglądania Internetu pod wieloma względami znacznie ustępuje wersji papierowej. Wyświetlacze mają niską rozdzielczość, pozycja oglądania jest stała, a sterowanie myszą/klawiaturą jest bardzo niewygodne w porównaniu z ołówkiem i papierem
  • Przestrzeń treści: większość miejsca na stronie internetowej zajmują menu, paski narzędzi i elementy sterujące nawigacją, zmniejszając w ten sposób miejsce na treść
  • Błędy ortograficzne: powodują one faktyczne niepowodzenie nawigacji i wyszukiwania, a nie tylko zawstydzenie lub zamieszanie
  • Konwersja na wersję papierową: często kończy się niepowodzeniem z powodu brakujących czcionek, konwersji graficznych, a także problemów z rozmiarem i układem strony
  • Śmieciowe mapy i dezinformacja: niska rozdzielczość obecnych wyświetlaczy w połączeniu z migotaniem wyświetlaczy CRT oznacza, że ​​bałagan i wzory mory jeszcze bardziej zmniejszają obraz na wyświetlaczu niż na papierze i przyczyniają się do zmęczenia i zamieszania.
  • Kolory: niska rozdzielczość wyświetlaczy oraz łatwość i zerowy koszt koloru oznaczają, że kolory można wykorzystać do skuteczniejszego przekazywania informacji (na przykład, gdy wszystkie elementy danego tematu mają ten sam kolor) lub można je niewłaściwie wykorzystać w celu zaostrzenia zamieszania .
  • Dokumentacja danych: ponieważ o wiele łatwiej jest wyrzucić stronę internetową niż opublikować artykuł w czasopiśmie lub czasopiśmie, a wyszukiwarki mogą przeszukiwać stronę na podstawie słów kluczowych, istnieje znacznie większe prawdopodobieństwo natknięcia się na śmieciową wiedzę na stronie Sieć. Widzę w przyszłości zdecydowaną potrzebę posiadania witryn certyfikowanych w jakiś sposób, aby zapewnić jakość informacji, oraz zapewnienia wyszukiwarkom wrażliwym na tę certyfikację.
  • Gęstość informacji: niska rozdzielczość ekranów i długi czas pobierania dużych plików sprawiają, że informacje o dużej gęstości są mniej pożądane w Internecie. Aby to zrekompensować, można zastosować różne techniki, takie jak dokumentacja rozmiarów plików i czasu pobierania, wybór grafiki o różnej rozdzielczości, zbiory miniatur i/lub przyciętych obrazów, które po kliknięciu wyświetlają wersję miniatury w wysokiej rozdzielczości itp.
  • Tekst kontra grafika: czas pobierania, różne możliwości przeglądarek i problemy z rozdzielczością przechylają równowagę między tekstem a grafiką bardziej w stronę tekstu.
  • Rozumienie sekwencyjne a rozumienie gestaltowe: Tufte zwraca uwagę, że grafika o dużej gęstości na papierze pozwala zobaczyć złożone wzory jako pojedynczy gestalt. Jednakże interaktywne wyświetlacze internetowe mogą prowadzić Cię sekwencyjnie przez kolejne etapy, które udostępniają jedynie kontekst, który musisz znać na podstawie poprzednich wyborów, podobnie jak drzewo telefonów wizualnych. W niektórych przypadkach jest to bardziej skuteczne niż wyświetlacz o dużej gęstości, w innych jest mniej.
  • Zachowanie kontekstu: o wiele łatwiej jest zgubić się w witrynie internetowej niż w książce, ponieważ jest tak wiele ścieżek, którymi można podążać. Dlatego skuteczne narzędzia nawigacyjne są w Internecie o wiele ważniejsze niż w przypadku wersji papierowej.

Powrót do indeksu

(P) Jakie są polecane przez Państwa witryny internetowe pod względem treści, trafności graficznej, estetyki i skuteczności i dlaczego?

Najbardziej podobają mi się strony:

  • Strona NASA Skywatch pod adresem: http://spaceflight.nasa.gov/realdata/sightings/index.html.
    Dostarcza informacji o wielu dużych satelitach na orbicie. Strona początkowa wyjaśnia cel zarówno w formacie tekstowym, jak i w formacie multimediów strumieniowych, omawia potrzebne zasoby w zakresie czasu pobierania i rozmiaru pliku oraz zawiera przyjemną dwupoziomową kontrolę nawigacji, która kieruje Cię do dowolnej części witryny NASA.
    Aplet Java dostarcza informacji o satelitach i pozycjach orbitalnych, które służą zarówno inżynierom technicznym, jak i społeczeństwu, poprzez tabele i kolorową mapę z adnotacjami torów orbitalnych względem zidentyfikowanych i nakreślonych konstelacji dla danej lokalizacji. Jest łatwy w użyciu, atrakcyjny i zawiera wiele informacji.
  • Inną dobrą stroną jest: http://www.nsf.gov. Jej początkowa strona jest atrakcyjna, zwarta, zawiera niewiele grafik i szybko się pobiera. Zawiera także przyjemną dwupoziomową kontrolę nawigacji, informacje kontaktowe, dotyczące prywatności, pomocy i dostosowywania, narzędzie wyszukiwania, możliwość wyboru kategorii przeglądającego (uczniowie, nauczyciele, główni badacze), a wiele kolejnych stron oferuje kilka możliwości wyboru przeglądanie danych, takich jak HTML, zwykły tekst i format PDF. Wiele stron, choć nie wszystkie, zachowuje ten sam wygląd i sposób działania oraz elementy sterujące nawigacją, co na stronie głównej.
  • Niektóre wyjątkowo pouczające grafiki można znaleźć, klikając „Mapę rynku” pod adresem: http://www.smartmoney.com/maps/
    Chociaż początkowo otwiera się całkowicie bezużyteczną i irytującą reklamą, która pozostaje na ekranie przez długi czas i nie daje wskazówek, co dalej, wynikowy ekran jest tego wart. Zawiera reprezentacje wielu akcji, pogrupowane według sektorów i oznaczone kolorowymi obszarami, których wielkość odzwierciedla ich udział w rynku i których odcień i intensywność pokazują wyniki akcji: jasnoczerwony oznacza gwałtowne spadki, czarny oznacza brak zmian i jasnozielony oznacza silne wzrosty , z odcieniami pośrednimi pomiędzy nimi. Patrząc na dzisiejszy ekran, widzę, że akcje spółek technologicznych mocno spadają, akcje spółek energetycznych rosną, podobnie jak podstawowe produkty konsumenckie. Mogę wyświetlić sektor bardziej szczegółowo, mogę najechać myszką na obszar, aby zidentyfikować konkretne akcje i uzyskać informacje o wynikach, a także mogę kliknąć akcje, aby uzyskać szczegółowe informacje. Zawiera także panel umożliwiający personalizację mapy. Jest to doskonały przykład wielofunkcyjnej grafiki, która pozwala przeglądać informacje na wiele różnych sposobów.

Powrót do indeksu

(P) W jaki sposób witryna może być skuteczna, interesująca i atrakcyjna zarówno dla internauty, jak i dla wnikliwego użytkownika?

Dobra witryna internetowa zawiera następujące elementy:

  • Opiera się na projekcie skoncentrowanym na użytkowniku (w przeciwieństwie do korporacyjnego, strukturalnego czy jakiegokolwiek innego punktu widzenia) i przetestowanym przez użytkownika
  • Jej początkowa strona zawiera prosty, zaawansowany technologicznie kod HTML, który ładuje się szybko, nie wymaga wtyczek, działa na prawie wszystkich przeglądarkach, umieszcza najważniejsze informacje na górze i od razu mówi ludziom:
    • jakie tematy porusza i jakie zagadnienia porusza
    • jeśli posiada informacje, których szukają
    • czy informacje są aktualne (np. data ostatniej modyfikacji)
    • jakie dowody na to, że informacje są dokładne
  • Strona początkowa posiada identyfikujące logo oraz zawiera lub zawiera łącza do:
    • mapę serwisu
    • informacje kontaktowe
    • informacje o odpowiedzialnej organizacji
    • formularz opinii o witrynie lub wskazówki do grupy dyskusyjnej
    • gwarancji co do bezpieczeństwa i prywatności
    • powiązane witryny
    • Informacje o technologii potrzebnej do przeglądania kolejnych stron serwisu (np. wersje przeglądarek, niezbędne pliki do pobrania, rozmiary plików czy czasy własnego ładowania)
  • Kolejne strony serwisu posiadają wiele cech strony początkowej, ale także:
    • użyj tego samego wyglądu i stylu, co strona główna pod względem wyglądu i lokalizacji logo oraz innych informacji, które jednoznacznie identyfikują witrynę (przydatne są do tego zewnętrzne arkusze stylów)
    • zapewniają spójne elementy sterujące nawigacją, które wyglądają tak samo i znajdują się w tym samym miejscu, takie jak przyciski „Dalej”, „Poprzedni” i „Strona główna” (szczególnie unikaj stron, na których przycisk „Wstecz” nie działa)
    • kontekst wyświetlania i lokalizacja: w przypadku skomplikowanych witryn bardzo ważne jest, aby wiedzieć, gdzie się znajdujesz i gdzie byłeś. Chociaż ramki stwarzają poważne problemy z użytecznością, czasami są wykorzystywane do zapewnienia stałego spisu treści w całej witrynie. Adresy URL zawierające tylko proste słowa i bez symboli mogą pomóc w identyfikacji lokalizacji w witrynie, a także diagramy drzewiaste podkreślające bieżącą lokalizację użytkownika
    • właściwie kontroluj okna: mnogość pozostających w pobliżu okien powoduje bałagan i zamieszanie (a także ryzyko bezpieczeństwa, jeśli użytkownik robi więcej niż tylko surfowanie), ale okna, które zamykają się automatycznie, mogą przestraszyć i zdezorientować użytkownika: projektant stron internetowych musi to rozważyć kwestii w zależności od mających zastosowanie okoliczności
  • Wszystkie strony używają:
    • wyciszone tło, które nie zakłóca nakładania się informacji
    • dobry kontrast między tłem a tekstem lub elementami sterującymi
    • jasne kolory oszczędnie, aby podkreślić ważne treści
    • ten sam kolor dla wszystkich przedmiotów należących do tej samej kategorii
    • tekst, chyba że grafika daje rzeczywistą przewagę
    • widoczne informacje strukturalne, takie jak tytuły, podtytuły i listy wypunktowane zamiast długich akapitów
    • biała spacja jako główny ogranicznik
    • znacznie zmniejszona ilość tekstu w porównaniu z wersją papierową
    • sprawdzanie pisowni, aby mieć pewność, że funkcje nawigacji i wyszukiwania działają

Powrót do indeksu

(P) Czy witryna powinna być piękna, aby była skuteczna?

W pewnym stopniu piękno jest w oku patrzącego, ponieważ użytkownik przeszkolony w interpretowaniu pewnych wzorców może dostrzec piękno w witrynie, która ma dla niego sens, ale wydaje się brzydka i zdezorganizowana komuś bez jego doświadczenia (często widzimy to, czego się spodziewamy, a nie niż to, co tam jest, raczej jak żaba, która jest w dużej mierze ślepa na wszystko, co nie jest małe, ciemne i poruszające się gwałtownie – mucha).

Natomiast w przypadku witryn, które nie wymagają specjalistycznej wiedzy, estetykę można osiągnąć poprzez przejrzysty projekt, który podkreśla użyteczność, zwłaszcza jeśli estetyczne dodatki dodawane są tylko wtedy, gdy są świadomie uzasadnione pod względem użyteczności

Powrót do indeksu

Jaki wpływ ma rozmiar i rozdzielczość ekranu na grafikę w Internecie i jak opracować efektywną grafikę przy tych ograniczeniach?

Jest to obszerny i ważny temat i być może jest przyczyną głównych różnic między projektowaniem w Internecie a projektowaniem na papierze:

  • Różnice w wielkości: jeśli ograniczymy naszą dyskusję do „tradycyjnych” komputerów i wyświetlaczy, wówczas różnice w wielkości ekranu (w przeciwieństwie do rozdzielczości) nie wpływają znacząco na zrozumienie grafiki, ponieważ duże 19-calowe ekrany mają tylko 2,5 razy większą powierzchnię niż małe 12-calowe ekrany. Jednak obecnie obserwujemy coraz większą liczbę urządzeń, takich jak palmtopy, telefony komórkowe, a nawet zegarki na rękę, które surfują po Internecie i których ekrany są 100 razy mniejsze. Typowe strony internetowe po prostu nie mieszczą się na takich urządzeniach i projekty stron muszą być specjalnie dla nich dostosowane, chociaż XML/XSL często może być używany do zmiany przeznaczenia większych dokumentów w celu ich dopasowania.
    W porównaniu z dużymi rozkładanymi mapami lub stronami, które pozwalają oczom łatwo ominąć duże obszary, przeglądarka internetowa opiera się na łączach do wielu stron zawierających fragmenty widoku, przez co traci się ogólny kontekst – każdy, kto korzysta z mapy typu książkowego wie, jak trudno jest podążać trasą, która przecina różne strony; podobnie porównania na dużym wykresie naukowym są bardzo trudne, jeśli widz nie może zobaczyć wszystkiego naraz.
    Ponadto obecne ekrany LCD oferują ograniczone kąty widzenia, więc nawet jeśli byłyby duże lub miały wysoką rozdzielczość, utrudniałyby zrozumienie na dużych obszarach.
  • Różnice w rozdzielczości: są nawet ważniejsze niż rozmiar. Teoretycznie nawet strona zaprojektowana dla 20-calowego wyświetlacza zmieściłaby się na wyświetlaczu zegarka naręcznego, gdyby rozdzielczość była taka sama, ale ekrany o niskiej rozdzielczości nie tylko zmuszają użytkownika do przewijania w poziomie, ale mogą nie renderować większej jej części.
    W porównaniu z papierem, powszechnie używane wyświetlacze mają od pięciu do dziesięciu razy mniejszą rozdzielczość. W rezultacie szczegóły są niewyraźne, mały tekst niewyraźny i niewyraźny, a oglądanie jest męczące, zwłaszcza gdy występuje migotanie ekranu. Traci się także ogólny kontekst, co zmusza użytkownika do zapamiętywania i łączenia informacji z poprzednich ekranów, do czego ludzki umysł nie jest przystosowany.
    Z drugiej strony w sieci dostępne są narzędzia, które częściowo to rekompensują:

    • pomimo pewnych wad użytkowych, zwłaszcza związanych z nawigacją, można za pomocą ramek wyświetlić w jednej ramce ogólny widok sceny w postaci klikalnej mapy obrazowej: po kliknięciu przez użytkownika obszaru na mapie poglądowej wyświetlana jest wysoka rozdzielczość widok części obrazu pojawia się w drugiej klatce. Jest to szczególnie skuteczne, jeśli obraz w pierwszej klatce podświetla obszar, na który kliknięto, wyświetla aktualną pozycję myszy względem mapy i jeśli mapa obrazu zawiera duże nakładanie się oraz różne stopnie powiększenia, co poprawia szansa na wyświetlenie całego pożądanego kontekstu.
    • czasami animację można skutecznie zastosować zamiast „małych wielokrotności”: płynny i szybko zmieniający się obraz, szczególnie gdy jest pod pełną kontrolą użytkownika, często może przekazać informacje lepiej niż statyczna strona o wysokiej rozdzielczości
  • Należy jednak pamiętać, że przewaga papieru nad wyświetlaczami w zakresie rozmiaru i rozdzielczości zniknie za 5-10 lat: na rynku dostępne są już dwumegapikselowe ekrany LCD w laptopach; IBM zaprezentował niedawno 22-calowy wyświetlacz LCD o niesamowitej rozdzielczości 9 megapikseli, który całkowicie konkuruje z drukowaną stroną (obecnie jest bardzo drogi, ale z pewnością spadnie jego cena), a technologia subpikseli ClearType (TM) firmy Miscosoft znacznie zwiększa efektywną rozdzielczość tekstu i czarno-białe obrazy, czasami o 300%
    Ponadto nowsze wyświetlacze LCD mają szersze pole widzenia i nie migoczą. W niedalekiej przyszłości tablety wyposażone w rysik będą mogły być trzymane i obsługiwane podobnie jak czasopismo, będą lepiej służyć do wskazywania, rysowania i pisania niż myszy i klawiatury, a ponadto będą wyposażone w wejścia/wyjścia głosowe i audio. Wkrótce pojawią się bardzo duże wyświetlacze ekranowe, a także wyświetlacze siatkówkowe do komputerów przenośnych, zapewniające stereoskopowe obrazy o prawdziwej wysokiej rozdzielczości, które użytkownikowi wydają się mieć szerokość 6 stóp.

Powrót do indeksu

(P) Jakie nowe możliwości oferuje technologia internetowa w projektowaniu?

Sieć może zapewnić bogatsze środowisko informacyjne niż jest to możliwe w przypadku statycznych stron na papierze, takich jak:

  • Aktualne informacje: Informacje internetowe mogą być nie tylko bardziej aktualne niż w formie papierowej, ale mogą być natychmiastowe, jak w przypadku kamer internetowych o ruchu drogowym, rezerwacji biletów, raportów giełdowych, odczytów GPS itp.
  • Animacja kontrolowana przez użytkownika: do symulacji animacji na papierze zwykle używa się małych wielokrotności, ale Internet oferuje znacznie większe możliwości, np
    • ruch w czasie rzeczywistym
    • kontrola użytkownika nad prędkością i kierunkiem (do przodu i do tyłu)
    • animacja wybranych przez użytkownika podzbiorów, dzięki czemu można obserwować poszczególne przejścia przy różnych prędkościach i kierunkach
    • zamrożenie klatek, które przechwytują jedną lub więcej klatek animacji
    • reakcja w czasie rzeczywistym na dane wejściowe dostarczane przez użytkownika lub ze źródeł zewnętrznych
  • Grafika 3D: często trudno jest znaleźć właściwy punkt widzenia dla złożonych scen 3D na papierze, ponieważ każdy pojedynczy widok lub nawet zestaw widoków może ukryć lub zniekształcić ważne informacje. Jednak wizualizacje danych 3D w Internecie, dostarczane przez VRML lub inne programy, pozwalają użytkownikowi oglądać dane pod dowolnym kątem. Wiele lat temu widziałem wnikliwą demonstrację JW Tukeya, który interaktywnie badał wielowymiarowe (10-12 wymiarowe) zbiory danych. Początkowo pojawiały się tylko zestawy przypadkowych, pozbawionych znaczenia kropek, ale gdy zwinął dane według pewnych wymiarów i zastosował rotacje, wyłoniły się mocne i proste krzywe, które ilustrowały ważne zależności.
    Chociaż prawdą jest, że sterowanie obiektami 3D jest obecnie dość trudne, jak zwykle robimy to za pomocą myszy na powierzchni 2D, w niedalekiej przyszłości będzie to łatwiejsze dzięki atrakcyjnym i lekkim zestawom słuchawkowym, które oferują prawdziwą stereoskopową wizję w połączeniu z kamerami stereoskopowymi które śledzą położenie dłoni w 3D, co pozwala nam „chwytać” obrazy 3D i manipulować nimi tak łatwo, jak obiekty ze świata rzeczywistego.
  • Grafika o dużej gęstości: chociaż wersja drukowana oferuje wyższą rozdzielczość niż obecnie wyświetlane wyświetlacze, niektóre technologie sieciowe umożliwiają powiększanie, aby przeglądać zbiory danych znacznie bardziej szczegółowo niż jest to możliwe na papierze.
  • Eksploracyjna analiza danych: Sieć umożliwia nie tylko przeglądanie, ale także manipulowanie i przekształcanie danych w celu odkrycia relacji, których nigdy nie można by zaobserwować na papierze
  • Uniwersalne urządzenia informacyjne: Sieć, zwłaszcza poprzez dostęp bezprzewodowy, może łączyć w sobie wszystkie formy informacji, które obecnie dostarczają wiele różnych urządzeń: zegarki, budziki, radia, telewizory, gazety, czasopisma, książki, płyty CD, komputery, gry wideo, dokumentacja prawna, finansowa, medyczna, licencje, zezwolenia, sale lekcyjne, teatry itp.

Powrót do indeksu

(P) Jakie są najczęstsze błędy spotykane podczas projektowania stron internetowych?

Do bardziej irytujących wad projektowych, które często spotykam, należą:

  • Brak informacji o dacie/godzinie: większość informacji jest do pewnego stopnia niestabilna. „Data ostatniej modyfikacji” jest niezbędna w przypadku większości witryn, a wszelkie dane na stronie zależne od czasu wymagają dokumentacji czasowej
  • Myląca nawigacja, okna uniemożliwiające nawigację lub zbyt wiele wyskakujących okienek
  • Strony początkowe, które ładują się zbyt wolno lub wymagają wtyczek, wyjątkowych zasobów lub skryptów wyłączających przeglądarki
  • Brak informacji o witrynie, takich jak mapa witryny i dane kontaktowe
  • Bałagan w postaci mylącego układu, długich akapitów, rozpraszającej grafiki, jaskrawych tła, niespójnego użycia kolorów (różne kolory w ramach tego samego tematu lub ten sam kolor dla różnych tematów), wzory mory
  • Niewrażliwość na ograniczenia techniczne lub ograniczenia użytkownika: strony internetowe powinny zapewniać alternatywne możliwości przeglądania osobom z ograniczonymi przeglądarkami, komputerami lub ograniczeniami fizycznymi.