Spletna stran Oblikovanje Navdih Edward Tufte

C&C

 

Indeks

Vprašanje: Kakšna so vprašanja iz dela Edward Tufte, ki so pomembne za spletno stran?
Vprašanje: Kakšne so vaše priporočene spletne strani glede vsebine, grafične pomembnosti, estetike in učinkovitosti, in zakaj?
Vprašanje: Kako lahko spletno mesto učinkovito, zanimivo in privlačno za Net surferja in za poglobljenega uporabnika?
Vprašanje: Ali naj bo spletna stran lepa in učinkovita?
Vprašanje: Kaj vpliva na velikost in ločljivost zaslona na grafike v spletu, in kako razvijate učinkovito grafiko v okviru teh omejitev?
Vprašanje: Katere nove potenciale ponuja oblikovanje s spletno tehnologijo?
Vprašanje: Katere so najpogostejše napake v spletnem oblikovanju?

(V) Kakšna so vprašanja iz dela Edward Tufte, ki so pomembne za spletno stran?

Vprašanja, za katera menim, da so najbolj ustrezna, so:

  • Izhodni mediji: pisci v papirni obliki poznajo svoj ciljni medij, vendar se spletne vsebine lahko prikazujejo na radikalno različnih napravah glede velikosti, ločljivosti in celo samega medija (visoko zmogljive delovne postaje, majhne prenosne računalnike, dlančnike, braillovo pisavo, izgovorjene besede itd. )
  • Pričakovanja uporabnikov: Spletni uporabniki drugače pristopijo do informacij kot na papirju in verjetneje skenirajo informacije, ne pa jih preberete
  • Ergonomija: trenutna tehnologija za brskanje po spletu je v mnogih pogledih precej slabša od papirne kopije. Zasloni so nizke ločljivosti, položaj gledanja je fiksiran in kontrole miške / tipkovnice so zelo nerodne v primerjavi s svinčnikom in papirjem
  • Prostor v vsebini: veliko prostora za spletne strani prevzamejo meniji, orodne vrstice in navigacijske kontrole, kar zmanjša prostor za vsebino
  • Napake črkovanja: to povzroči dejansko neuspelo navigacijo in iskanje, v nasprotju s samo zadrego ali zmedo
  • Pretvorba v hardcopy: to pogosto ne uspe zaradi manjkajočih pisav, manjkajočih grafičnih konverzij ter težav s postavitvijo velikosti in strani
  • Grafični podatki o disku in dis-informaciji: nizka ločljivost trenutnih zaslonov, skupaj z utripanjem prikazov CRT, pomeni, da se neredi in mavrični vzorci še bolj odštejejo od prikaza kot na papirju in prispevajo k utrujenosti in zmedenosti.
  • Barve: nizka ločljivost zaslona in enostavnost ter ničelni stroški barve pomenijo, da se barve lahko uporabijo za učinkovitejši prenos informacij (na primer, kadar vsi elementi posamezne teme delijo isto barvo) ali jih je mogoče zlorabiti, da bi se poslabšala zmeda .
  • Dokumentacija podatkov: ker je veliko lažje prikazati spletno stran, kot pa objaviti članek v reviji ali reviji in ker iskalniki lahko izkopljejo stran, ki temelji na ključnih besedah, obstaja veliko večje verjetnost, da se srečujejo z neželenim znanjem na Splet. V prihodnosti vidim močno potrebo, da bodo na nek način potrjena mesta za zavarovanje kakovostnih informacij in da bodo iskalniki občutljivi na to potrdilo.
  • Informacijska gostota: nizka ločljivost zaslona in počasni čas prenosa za velike datoteke omogočajo, da so informacije o gostoti na spletu manj zaželene. Za izravnavo tega lahko uporabite različne tehnike, kot so dokumentacija velikosti datotek in časov prenosa, izbire različnih ločljivosti grafike, zbirk sličic in / ali obrezanih slik, ki so ob kliku na zaslonu prikazali različico sličice z visoko ločljivostjo itd.
  • Besedilo v primerjavi z grafiko: čas prenosa, različne zmožnosti brskalnika in težave z ločljivostjo ustvarjajo ravnotežje besedila in grafike do besedila.
  • Zaporedna v primerjavi z gestaltnim razumevanjem: Tufte opozarja, da grafika visoke gostote na papirju omogoča, da vidite zapletene vzorce kot en sam gestalt. Vendar pa vas lahko interaktivni spletni prikazi vodijo zaporedoma, čeprav ste koraki, ki vas izpostavijo le kontekstu, ki ga morate poznati na podlagi prejšnjih izbir, namesto drevesa vizualnega telefona. V nekaterih primerih je to bolj učinkovito od prikaza z visoko gostoto, v drugih primerih pa manj.
  • Ohranjanje konteksta: veliko je lažje, da se izgubite na spletnem mestu kot knjigo, saj je toliko poti za nadaljevanje. Zato so učinkovita navigacijska orodja na spletu veliko pomembnejša kot na papirju.

Nazaj na kazalo


(V) Kakšne so vaše priporočene spletne strani glede vsebine, grafične pomembnosti, estetike in učinkovitosti, in zakaj?

  • Med najbolj priljubljenimi spletnimi mesti so:

Spletna stran NASA Skywatch na naslovu: http://spaceflight.nasa.gov/realdata/sightings/index.html.

Zagotavlja informacije o številnih velikih satelitih v orbiti. Začetna stran razlaga namen v obliki besedilnega in pretočnega medija, razpravlja o potrebnih virih v zvezi s časom prenosa in velikostjo datoteke ter vsebuje lepo dvotirno navigacijsko krmiljenje, ki vas usmerja na kateri koli del spletnega mesta NASA.

Javni program nudi informacije o satelitih in orbitalnih položajih, ki služijo tehničnemu inženirju in javnosti prek tabel in barvnega zemljevida označenih orbitalnih skladb proti določenim in izrisanim ozvezdjem za določeno lokacijo. Je enostaven za uporabo, privlačen in zelo informativen.

  • Druga dobra stran je: http://www.nsf.gov Njena prva stran je privlačna, kompaktna, uporablja nekaj grafik in hitro prenese. Vsebuje tudi lepo dvotirno navigacijsko krmiljenje, informacije o stikih, zasebnost, pomoč in informacije o prilagajanju, iskalno orodje, izbire za kategorijo gledalcev (študente, učitelje, raziskovalce načela) in številne od naslednjih strani ponujajo več možnosti za ogled podatkov, kot so HTML, navadno besedilo in format PDF. Mnogi, vendar ne vsi, strani ohranjajo enake izglede in občutke ter navigacijske kontrole na domači strani.
  • Nekatere izjemno informativne grafike lahko najdete s klikom na “Zemljevid trga” na naslovu: http://www.smartmoney.com/maps/

Medtem ko se na začetku odpre s popolnoma neuporaben in siten oglas, ki ostane na zaslonu že dolgo časa in vam ne daje pojma o tem, kaj sledi, je rezultat, ki ga je dobro vredno. V njej so prikazane številne zaloge, razvrščene po sektorjih in označene z barvnimi površinami, katerih velikost odraža njihov tržni delež in katerih odtenek in intenzivnost kažejo stanje zalog: svetlo rdeče, kar pomeni strm padec, črn, kar pomeni, da ni sprememb, in svetlo zelena, ki kaže močne dobičke , z vmesnimi odtenki med njimi. Če pogledam na današnji zaslon, vidim, da so zaloge tehnologije zaustavljene, da se zaloge energije povečajo, tako kot potrošni material. Podrobneje si lahko ogledam sektor, lahko z miško nad določenim območjem identificiram določeno količino in dobim nekaj podatkov o uspešnosti ter lahko kliknem na stalež, da dobim podrobne informacije. Vsebuje tudi ploščo, ki vam omogoča, da prilagodite zemljevid. To je dober primer večfunkcijske grafike, ki vam omogoča ogled informacij na več različnih načinov.

Nazaj na kazalo


(V) Kako lahko spletno mesto učinkovito, zanimivo in privlačno za Net surferja in za poglobljenega uporabnika?

Dobra spletna stran vključuje naslednje:

  • Temelji na uporabniku usmerjenem (v nasprotju s korporativnim, strukturnim ali katerim koli drugim stališčem), uporabniško preizkušen dizajn
  • Njegova prva stran vsebuje preproste HTML-tehnologije, ki se hitro naložijo, ne potrebujejo vtičnikov, delujejo na skoraj vseh brskalnikih, dajejo najpomembnejše informacije blizu vrha in takoj povejo ljudem:
    • katere teme pokriva ali katere teme se ukvarja
    • če ima informacije, ki jih iščejo
    • če so podatki aktualni (npr. datum-zadnji-spremenjeni)
    • kakšni so dokazi, da so podatki točni
  • Začetna stran ima logotip za prepoznavo in vsebuje ali ima povezave do:
    • zemljevid mesta
    • Kontaktni podatki
    • informacije o odgovorni organizaciji
    • obrazec za povratne informacije spletnega mesta ali kazalnike za razpravo
    • zagotovila glede varnosti in zasebnosti
    • povezane strani
    • Informacije o tehnologiji, ki je potrebna za ogled naslednjih strani na spletnem mestu (npr. Različice brskalnika, potrebni prenosi, velikosti datotek ali časi lastne obremenitve)
  • Naknadne strani na spletnem mestu imajo številne lastnosti prvotne strani, pa tudi:
    • uporabite enak videz in občutek kot domača stran v smislu videza in lokacije logotipa ter drugih informacij, ki edinstveno identificirajo spletno stran (za to so uporabni zunanji listi slogov)
    • zagotovite dosledne navigacijske kontrole, ki so enake in so na isti lokaciji, kot so gumbi “Naslednji”, “Prejšnji” in “Domači” (še posebej se izogibajte stranem, kjer gumb “Nazaj” ne deluje)
    • kontekst in lokacija prikaza: na zapletenih straneh je zelo pomembno vedeti, kje ste in kje ste bili. Medtem ko okvirji predstavljajo večje težave z uporabnostjo, jih včasih uporabijo za zagotavljanje kazala vsebine, ki ostane nespremenjena na celotnem spletnem mestu. URL-ji, ki vsebujejo le preproste besede in brez simbolov, lahko pomagajo prepoznati lokacijo na spletnem mestu in drevesne diagrame, ki označujejo trenutno lokacijo uporabnika
    • pravilno krmiliti okna: širjenje oken, ki ostanejo okoli, povzroča nered in zmedo (pa tudi varnostna tveganja, če uporabnik počne več kot brskanje), vendar okna, ki se samodejno zaprejo, lahko zgrešijo in zmedejo uporabnika: spletni oblikovalec mora tehtati vprašanja, ki temeljijo na okoliščinah, ki se uporabljajo
  • Vse strani uporabljajo:
    • utišano ozadje, ki ne ovira preoblikovanja informacij
    • dober kontrast med ozadjem in besedilom ali kontrolami
    • svetle barve zmerno poudariti pomembne vsebine
    • enake barve za vse elemente, ki spadajo v isto kategorijo
    • besedilo, razen če grafika daje resnično prednost
    • vidne strukturne informacije, kot so naslovi, podnaslovi in seznami vrstic namesto dolgih odstavkov
    • beli prostor kot primarni omejevalnik
    • bistveno zmanjšano besedilo v primerjavi s papirjem
    • preverjanje črkovanja, da zagotovite delovanje navigacijskih in iskalnih funkcij

Nazaj na kazalo


(V) Ali je spletna stran lepa, da bi bila učinkovita?

V določeni meri je lepota v očeh opazovalca, saj lahko uporabnik, ki je usposobljen za razlago določenih vzorcev, vidi lepoto na mestu, ki ima smisel za njih, vendar se zdi grdo in neorganizirano za nekoga brez svojega ozadja (pogosto vidimo, kaj pričakujemo kot kaj je tam, podobno kot Žaba, ki je v veliki meri slepa za vse, kar ni majhno, temno in premikajoče se – muha).

Za spletna mesta, ki ne zahtevajo specializiranega znanja, verjamem, da estetiko lahko dosežemo z jasnim dizajnom, ki poudarja uporabnost, še posebej, če so estetski dodatki dodani samo, če so zavestno upravičeni glede njihove uporabnosti

Nazaj na kazalo


Kaj vpliva na velikost zaslona in ločljivost grafik na spletu, in kako razvijate učinkovito grafiko pod temi omejitvami?

To je velika in pomembna tema in je morda razlog za velike razlike med oblikovanjem na spletu v primerjavi s papirjem:

  • Razlike v velikosti: če omejimo razpravo na “tradicionalne” računalnike in prikaze, razlike v velikosti zaslona (v nasprotju z ločljivostjo) ne vplivajo veliko na razumevanje grafike, saj imajo veliki 19-palčni zasloni samo 2,5-kratno površino majhnih 12-palčni zaslon. Vendar zdaj vidimo vedno več naprav, kot so dlančniki, mobilni telefoni in celo zapestne ure, ki brskajo po spletu in katerih zasloni so 100-krat manjši. Tipične spletne strani se preprosto ne bodo uvrstile na takšne naprave, strani za njih pa morajo biti natančno usmerjene, čeprav se XML / XSL pogosto lahko uporablja za ponovno nameščanje večjih dokumentov, da se prilegajo.

V primerjavi z velikimi raztegnjenimi zemljevidi ali stranmi, ki omogočajo očesu, da zlahka pometajo na večjih področjih, se spletni pregledovalnik opira na povezave na več strani, ki vsebujejo dele pogleda, zato je celoten kontekst izgubljen – vsakdo, ki uporablja mapo z vrsto knjige ve, kako težko je slediti poti, ki prečka različne strani; podobno so primerjave v velikem znanstvenem grafikonu zelo težke, ko gledalec ne vidi vse naenkrat.

Poleg tega trenutni LCD-zasloni ponujajo omejen kot gledanja kota, tako da tudi če bi bile velike ali visoke ločljivosti, bi otežilo razumevanje na velikih območjih.

  • Razlike v ločljivosti: ti so še pomembnejši od velikosti. Teoretično bi bila tudi stran, zasnovana za 20-palčni zaslon, na zaslonu ročne ure, če bi bila resolucija enaka, vendar zasloni z nizko ločljivostjo ne bodo prisilili uporabnika samo v vodoravno pomikanje, temveč bi mu morda ne bodo večji deli.

V primerjavi s papirjem imajo danes razširjene zaslone pet do desetkrat manj ločljivosti. Kot rezultat, podrobnosti so grobe, majhno besedilo je šibko in mehko, in gledanje je naporno, še posebej, ko je zaslon flicker je prisoten. Tudi celoten kontekst je izgubljen, zaradi česar uporabnik zapomni in poveže informacije iz prejšnjih zaslona, nekaj, za kar je človeški um slabo prilagojen.

Po drugi strani pa splet ponuja orodja, ki delno nadomestijo to:

  • kljub nekaterim pomanjkljivostim uporabnosti, še posebej v zvezi z navigacijo, lahko uporabite okvirje za prikaz celotnega pogleda scene v enem okviru v obliki zemljevida slikovnih kartic, ki se lahko klikne: ko uporabnik klikne območje na preglednem zemljevidu, pogled na del slike se pojavi v drugem okvirju. To je še posebej učinkovito, če slika v prvem okvirju opozarja na območje, na katerega je bil kliknjen, prikaže trenutni položaj miške glede na zemljevid in če se pri slikovnem zemljevidu pojavijo veliko prekrivanja in različne stopnje povečave, izboljša možnost prikaza celotnega želenega konteksta.
    • včasih se lahko animacija učinkovito uporablja namesto “majhnih večkratnikov”: gladka in hitro spreminjajoča se slika, še posebej, kadar je pod nadzorom celotnega uporabnika, pogosto prenaša informacije bolje kot statična stran z visoko ločljivostjo
  • Upoštevajte pa, da bo velikost in ločljivost prednosti papirja nad zasloni izginila čez 5-10 let: na LCD zaslonih z LCD zaslonom na prenosnih računalnikih so že na voljo dva milijona slikovnih pik; IBM je pred kratkim predstavil 22-palčni LCD z neverjetnimi 9-milijoni slikovnimi pikami, ki temeljito tekmujejo s tiskano stranjo (trenutno je zelo draga, vendar bo zagotovo padla na ceno), in tehnologija podpispisa Miscosoft’s ClearType (TM) močno izboljša učinkovito ločljivost besedila in črno / bele slike, včasih za 300%

Poleg tega imajo novejši LCDji širši pogled in ne utripata. V bližnji prihodnosti se tablični računalniki s pisalnim vhodom lahko držijo in manipulirajo podobno kot revija, so boljši za usmerjanje, risanje in pisanje kot miši in tipkovnice ter bodo nadgrajeni z glasovnim in avdio vhodom / izhodom. Na zaslonu so prikazani zelo veliki zaslonski prikazi, kot tudi mrežnice za nosljive računalnike, ki zagotavljajo resnične stereoskopske slike z visoko ločljivostjo, ki se uporabniku zdijo široki 6 metrov.

Nazaj na kazalo


(V) Katere nove potenciale ponuja oblikovanje po spletnih tehnologijah?

Splet lahko zagotovi bogatejše informacijsko okolje, kot je mogoče s statičnimi stranmi na papirju, kot so:

  • Najnovejše informacije: Spletni podatki ne morejo biti le trenutni od papirne kopije, temveč so lahko takoj, kot v primeru prometnih spletnih kamer, rezervacij vozovnic, poročil o zalogah, izpisov GPS itd.
  • Uporabniško nadzorovana animacija: majhni večkratniki se ponavadi uporabljajo za simulacijo animacije na papirju, toda splet ponuja veliko večje možnosti, na primer
    • gibanje v realnem času
    • uporabniški nadzor hitrosti in smeri (naprej in nazaj)
    • animacija izbranih uporabniških podskupin, tako da je mogoče opaziti določene prehode pri različnih hitrostih in navodilih
    • zamrzne okvire, ki zajemajo enega ali več okvirov v animacijah
    • odziv v realnem času na vhod, ki ga dobite od uporabnika ali zunanjih virov
  • 3D grafika: pogosto je težko najti pravo razgledno točko za zapletene 3D prizore na papirju, saj lahko kateri koli posamezni pogled ali celo pogled pogleda skrije ali izkrivlja pomembne podatke. Toda 3D vizualizacije podatkov na spletu, ki jih ponuja VRML ali drugi programi, omogočajo uporabniku, da si ogleda podatke iz katerega koli kota. Pred mnogimi leti sem videl vpogled v demonstracijo J. W. Tukeyja, ki je interaktivno raziskoval večdimenzionalne (10-12 dimenzijske) nizove podatkov. Sprva so se pojavile vse nakljucne nesmiselne pike, toda, ko je zbral podatke ob dolocenih dimenzijah in uporabljenih rotacijah, so se pojavile mocne in preproste krivulje, ki so pokazale pomembna razmerja.

Medtem ko je res, da je nadzor nad 3D-predmeti danes nekoliko težak, saj ponavadi to storimo z miško na 2D površini, bo v bližnji prihodnosti lažje s privlačnimi in lahekimi slušalkami, ki nudijo resnično stereoskopsko vizijo v kombinaciji s stereo kamerami ki sledijo položajem roke v 3D, kar nam omogoča, da »grabimo« in manipulirajo 3D slike tako enostavno kot mi, ki delajo resnične svetovne predmete.

  • Grafika visoke gostote: čeprav je na papirju večja ločljivost od trenutnih zaslonov, nekatere spletne tehnologije omogočajo povečavo, da si lahko ogledate več podatkov, kot je to mogoče na papirju.
  • Analiza raziskovalnih podatkov: Splet omogoča ne samo ogled, ampak manipuliranje in uporabo transformacij v podatke, da bi odkrili odnose, ki jih na papirju nikoli ne bi mogli opaziti
  • Univerzalne informacijske naprave: splet, zlasti z brezžičnim dostopom, lahko poveže vse oblike informacij, ki jih danes ponujajo številne različne naprave: ure, budilke, radii, TV, časopisi, revije, knjige, zgoščenke, računalniki, video igre, pravno, finančno in zdravstveno kartoteko, licence, dovoljenja, učilnice, gledališča itd.

Nazaj na kazalo


(V) Katere so najpogostejše napake v spletnem oblikovanju?

Med bolj nadležnimi oblikovalskimi napakami, ki jih pogosto vidim, so:

  • Pomanjkanje podatkov o datumu / času: večina podatkov je do neke mere nestanovitna. Za večino spletnih mest je bistvenega pomena »datum-zadnja sprememba« in vsi časovno odvisni podatki na strani potrebujejo časovno dokumentacijo
  • Nejasna navigacija, okna, ki onemogočajo navigacijo ali preveč pop-up oken
  • Začetne strani, ki nalagajo prepočasi ali zahtevajo vtičnike ali izjemne vire ali skripte, ki onemogočajo brskalnike
  • Pomanjkanje podatkov o spletnem mestu, na primer zemljevid mesta in kontaktne informacije
  • Nered pri zmedeni postavitvi, dolgih odstavkih, motečih grafikah, gordanem ozadju, nedosledni uporabi barve (različne barve v isti temi ali enaki barvi za različne teme), vzorce moire
  • Neobčutljivost na tehnične ali uporabniške omejitve: spletne strani bi morale zagotoviti alternativne možnosti gledanja za tiste z omejenimi brskalniki, računalniki ali fizične omejitve.

Nazaj na kazalo

 

Slovenian translation provided by : AudioReputation

Leave a Reply

Your email address will not be published. Required fields are marked *