Edward Tufte Poolt Inspireeritud Veebilehe Kujundamine
(Q) Millised on Edward Tufte tööde teemad, mis on veebisaidi jaoks olulised?
Minu arvates on kõige olulisemad järgmised probleemid:
Väljundkandja: paberkandjal kirjutajad teavad oma sihtmeediat, kuid veebisisu võib muuta radikaalselt erinevates seadmetes selle suuruse, eraldusvõime ja isegi meediumitüübi enda järgi (kallid tööjaamad, väikesed sülearvutid, PDA-d, punktkiri, suulised sõnad jne).
Kasutajate ootused: veebikasutajad lähenevad teabele erinevalt kui paberil ja skaneerivad teavet tõenäolisemalt, kui seda loevad.
Ergonoomika: praegune veebibrauseritehnoloogia on paljuski halvem kui paberkoopia. Kuvarid on madala eraldusvõimega, vaateasend on fikseeritud ning hiire/klaviatuuri juhtnupud on pliiatsi ja paberiga võrreldes väga kohmakad.
Sisuruum: suure osa veebisaidi ruumist võidavad menüüd, tööriistaribad ja navigeerimise juhtelemendid, vähendades sellega sisuruumi.
Õigekirjavead: need põhjustavad navigeerimise ja otsingu tegeliku tõrke, mitte lihtsalt piinlikkuse või segaduse.
Teisendamine paberkoopiaks: see ebaõnnestub sageli puuduvate fontide, puuduvate graafiliste konversioonide ning suuruse ja lehe paigutuse probleemide tõttu.
Graafiku rämps ja desinformatsioon: praeguste ekraanide madal eraldusvõime koos CRT-ekraanide virvendamisega tähendab seda, et rämps- ja soomustrid lahutavad kuvarist veelgi rohkem kui paberil ning põhjustavad väsimust ja segadust.
Värvid: kuvarite madal eraldusvõime ja värvi lihtsus ning nullkulu tähendavad, et värve saab kasutada teabe efektiivsemaks edastamiseks (näiteks kui ühe teema kõik elemendid jagavad sama värvi) või neid saab segaduse suurendamiseks väärkasutada.
Andmete dokumenteerimine: kuna veebisaidi üleskerkimine on palju lihtsam kui ajalehes või ajakirjas artikli avaldamine ja kuna otsingumootorid saavad märksõnade põhjal lehte süvendada, on tõenäolisem, et veebilehel leidub rämpsteadmiste Võrk. Näen tulevikus suurt vajadust saitide mingil viisil sertifitseerimiseks, et tagada kvaliteetset teavet ja et otsingumootorid oleksid selle sertifikaadi suhtes tundlikud.
Teabe tihedus: ekraanide madal eraldusvõime ja suurte failide aeglane allalaadimisaeg muudavad suure tihedusega teabe veebis vähem soovitavaks. Selle kompenseerimiseks võib kasutada mitmesuguseid tehnikaid, näiteks failide suuruste ja allalaadimisaegade dokumenteerimine, erineva eraldusvõimega graafika valikud, pisipiltide ja/või kärbitud piltide kogumid, millele klõpsates kuvatakse pisipiltide kõrge eraldusvõimega versioon jne.
Tekst versus graafika: allalaadimisajad, erinevad brauseri võimalused ja eraldusvõimega seotud probleemid suunavad teksti ja graafika tasakaalu teksti poole.
Järjestikune versus gestaltti mõistmine: Tufte juhib tähelepanu sellele, et paberil olev tiheda tihedusega graafika võimaldab näha keerulisi mustreid ühe gestaltina. Interaktiivsed veebikuvarid võivad teid järjestikku viia sammudeni, mis paljastavad teid ainult kontekstis, mida peate teadma eelnevate valikute põhjal, pigem visuaalse telefonipuu moodi. Mõnel juhul on see tõhusam kui suure tihedusega kuvar, muudel juhtudel vähem.
Konteksti säilitamine: veebisaidil on palju lihtsam eksida kui raamatul, sest selle saavutamiseks on nii palju võimalusi. Seega on tõhusad navigeerimisriistad veebis palju olulisemad kui paberkandjal.
(Q) Millised on teie soovitatud veebisaidid sisu, graafilise olulisuse, esteetika ja tõhususe osas ja miks?
Saidide hulgas, mis mulle kõige rohkem meeldivad, on:
NASA Skywatchi sait aadressil: http://spaceflight.nasa.gov/realdata/sightings/index.html.
See pakub teavet paljude orbiidil olevate suurte satelliitide kohta. Alguslehel selgitatakse eesmärki nii teksti kui voogesituse vormis, arutatakse allalaadimise aja ja faili suuruse osas vajalikke ressursse ning see sisaldab kena kaheastmelist navigeerimiskontrolli, mis suunab teid NASA saidi mis tahes osasse.Java Applet pakub teavet satelliitide ja orbitaalpositsioonide kohta, mis teenindavad nii inseneri kui ka üldsust, tabelite ja annotatsiooniga orbitaaljälgede värvikaardi abil antud asukoha tuvastatud ja visandatud tähtkujude suhtes. Seda on lihtne kasutada, see on atraktiivne ja väga informatiivne.
Veel üks hea sait on: http://www.nsf.gov. Selle esimene leht on atraktiivne, kompaktne, kasutab vähe graafikat ja laadib kiiresti alla. See sisaldab ka kena kahetasandilist navigeerimiskontrolli, kontaktandmeid, privaatsust, abi ja kohandamisteavet, otsingutööriista, vaatajakategooria valikuid (õpilased, õpetajad, juhtivteadlased) ja paljudel järgnevatel lehtedel on mitu valikut andmete, nagu HTML, lihttekst ja PDF-vormingus, vaatamine. Paljud, kuid mitte kõik lehed säilitavad avalehe sama välimuse ja tunde ning navigeerimise juhtelemendid.
Mõnda erakordselt informatiivset graafikat leiate, klõpsates "Turukaardil" aadressil: http://www.smartmoney.com/maps/
Ehkki see avaneb esialgu täiesti kasutu ja tüütu reklaamiga, mis jääb pikaks ajaks ekraanile ega anna teile aimugi, mis järgneb, on sellest tulenev ekraan seda väärt. See sisaldab paljude varude esindusi, mis on rühmitatud sektorite kaupa ja kodeeritud värviliste aladega, mille suurus kajastab nende turuosa ja mille toon ja intensiivsus näitavad nende varude tootlikkust: erkpunane tähendab järsku langust, must tähendab muutust ja erkroheline, mis näitab tugevat kasvu , vahepealsete varjunditega. Tänasele ekraanile heites näen, et tehnoloogia varud on vähenenud, energiavarud suurenenud, nagu ka tarbijate põhiosa. Saan sektorit üksikasjalikumalt vaadata, oskan hiirega üle valdkonna tuvastada konkreetse laoseisu ja saada toimivusteavet ning klõpsata laos täpsema teabe saamiseks. See sisaldab ka paneeli, mis võimaldab teil kaarti kohandada. See on hea näide mitmeotstarbelisest graafikast, mis võimaldab teil teavet vaadata mitmel erineval viisil.
(Q) Kuidas saab sait olla efektiivne, huvitav ja atraktiivne nii veebis surfarile kui ka põhjalikule kasutajale?
Hea veebisait sisaldab järgmist:
See põhineb kasutajakesksel (erinevalt korporatiivsest, struktuurilisest või muust vaatepunktist) kasutajal testitud disainist.
Selle algusleht sisaldab lihtsat madala tehnoloogiaga HTML-i, mis laadib kiiresti, ei vaja lisandprogramme, töötab peaaegu kõigis brauserites, paigutab kõige olulisema teabe ülaossa ja ütleb inimestele kohe:
milliseid aineid see hõlmab või milliseid probleeme see käsitleb
kui tal on teavet, mida nad otsivad
kui teave on ajakohane (nt kuupäeva muudetud)
mis tõendab, et teave on õige
Alglehel on identifitseeriv logo ja see sisaldab linke või sellel on:
saidi kaart
kontaktinfo
teave vastutava organisatsiooni kohta
saidi tagasiside vorm või näpunäited vestlusringile
turvalisuse ja privaatsuse tagatised
seotud saidid
Teave saidi järgmiste lehtede vaatamiseks vajaliku tehnoloogia kohta (nt brauseri versioonid, vajalikud allalaadimised, faili suurus või allalaadimisaj
Järgmistel saidi lehtedel on palju alglehe omadusi, aga ka:
logi välimuse ja asukoha ning muu saidi ainulaadse identifitseerimise teabe osas kasutage sama välimust ja tunnet nagu avalehel (välised stiililehed on selleks kasulikud)
pakkuge järjepidevaid navigatsioonikontrolle, mis näevad välja samad ja asuvad samas kohas, näiteks nupud "Järgmine", "Eelmine" ja "Avaleht" (eriti vältige lehti, kus nupp "Tagasi" ei tööta).
kuva kontekst ja asukoht: keerukates saitides on väga oluline teada, kus te olete ja kus olete olnud. Ehkki raamid tekitavad suuri kasutatavusprobleeme, kasutatakse neid mõnikord sisukorra muutmiseks, mis jääb kogu saidil samaks. Ainult lihtsaid sõnu sisaldavate ja sümboliteta URL-id aitavad tuvastada saidi asukohta, samuti puuskeemid, mis rõhutavad kasutaja praegust asukohta
kontrollige aknaid õigesti: ümberkaudsete akende levik põhjustab korralagedust ja segadust (kui katurvariske, kui kasutaja teeb midagi rohkem kui ainult surfab), kuid automaatselt sulgevad aknad võivad kasutajat jahmatama ja segadusse ajada: veebidisainer peab kaaluma neid küsimusi, mis põhinevad kehtivatel asjaoludel
Kõik lehed kasutavad:vaigistatud taust, mis ei sega teabe kattumist
hea kontrast tausta ja teksti või juhtelementide vahel
erksad värvid säästlikult, et olulist sisu esile tõsta
sama värv kõigi samasse kategooriasse kuuluvate üksuste puhul
pigem tekst kui graafika ei anna reaalset eelist
nähtav struktuuriteave, nagu pealkirjad, alapealkirjad ja täpploendid pikkade lõikude asemel
valge tühi ruum esmase eraldajana
oluliselt vähem teksti kui paberkoopiaga
õigekirja kontroll, et tagada navigeerimis- ja otsingufunktsioonide töö
(Q) Kas sait peaks olema ilus, et see oleks efektiivne?
Ilu on vaatajale silmapiiril selles osas, et teatud mustrite tõlgendamiseks koolitatud kasutaja võib näha ilu saidil, mis on nende jaoks mõistlik, kuid tundub ilma nende taustata kellegi jaoks kole ja korratu (sageli näeme seda, mida me pigem ootame kui see, mis seal on, pigem nagu Konn, kes on pime kõigele, mis pole väike, pime ja liigub jubedalt - kärbes).
Kuid usun, et saitidel, mis ei vaja eriteadmisi, on esteetika saavutatav selge kujundusega, mis rõhutab kasutatavust, eriti kui esteetilisi täiendusi lisatakse alles siis, kui need on nende kasulikkuse osas teadlikult õigustatud.
Mis mõjutab ekraani suurust ja eraldusvõimet veebigraafika puhul ning kuidas arendada nende piirangute korral tõhusat graafikat?
See on suur ja oluline teema ning võib-olla on ka veebis ja paberil kujunduse vahel suurte erinevuste põhjus:
Suuruserinevused: kui piirduda arutelus "traditsiooniliste" arvutite ja ekraanidega, siis ekraani suuruse erinevused (erinevalt eraldusvõimest) ei mõjuta suuresti graafika mõistmist, kuna 19-tollised suured ekraanid on pindalaga vaid 2,5 korda suuremad väikestest 12-tollistest ekraanidest. Nüüd näeme aga üha suuremat hulka seadmeid, näiteks PDA-sid, mobiiltelefone ja isegi käekellasid, mis surfavad veebis ja mille ekraanid on 100 korda väiksemad. Tüüpilised veebilehed lihtsalt ei sobi sellistesse seadmetesse ja lehe kujundus peab olema spetsiaalselt nende jaoks suunatud, kuigi XML/XSL-i võib sageli kasutada suuremate dokumentide ümberpaigutamiseks.
Võrreldes suurte volditud kaartide või lehtedega, mis võimaldavad silmal hõlpsalt üle suurte alade liikuda, tugineb veebivaatur linkide mitmele lehele, mis sisaldavad vaate osi, ja nii kaob üldine kontekst - kõik, kes kasutavad raamatutüüpi kaarti teavad, kui keeruline on jälgida marsruuti, mis läbib erinevaid lehti; samamoodi on väga suures teadusgraafikus väga raske teha võrdlusi, kui vaataja ei näe kõike seda korraga.
Lisaks pakuvad praegused vedelkristallekraanid piiratud ekraaninurki, nii et isegi kui need oleksid suured või kõrge eraldusvõimega, muudaksid need suurtest aladest arusaamise raskeks:Eraldusvõime erinevused: need on isegi olulisemad kui suurus. Teoreetiliselt sobiks isegi 20-tollisele ekraanile mõeldud leht käekella ekraanile, kui eraldusvõime oleks sama, kuid madala eraldusvõimega ekraanid ei sunni kasutajat mitte ainult horisontaalselt kerima, vaid võivad sellest suuremat osa renderdada.
Võrreldes paberiga on tänapäeval levinud kuvarite eraldusvõime viis kuni kümme korda väiksem. Seetõttu on üksikasjad jämedad, väike tekst on nõrk ja hägune ning vaatamine on väsitav, eriti kui ekraanil virvendada. Kaob ka üldine kontekst, sundides kasutajat eelmiste ekraanide teavet meeles pidama ja seda ühendama, milleks inimese mõistus sobib halvasti.
Teisest küljest pakub veeb tööriistu, mis seda osaliselt kompenseerivad:hoolimata teatavatest kasutatavuse puudustest, eriti navigeerimise osas, saab kaadreid kasutada stseeni üldvaate kuvamiseks ühes kaadris klõpsatava pildikaardi kujul: kui kasutaja klõpsab ülevaadet kaardil asuval alal, kõrge eraldusvõimega pilt ühest pildiosast kuvatakse teises kaadris. See on eriti efektiivne, kui esimese kaadri pilt tõstab esile klõpsatud ala, kuvab hiire praeguse asendi kaardi suhtes ja kui pildikaart sisaldab palju kattuvust ning erineva suumiga astet, siis on võimalus kuvada kogu soovitud kontekst.
mõnikord saab animatsiooni tõhusalt kasutada väikeste kordustena: sujuv ja kiiresti muutuv pilt, eriti kui see on täieliku kasutaja kontrolli all, võib teavet sageli paremini edastada kui staatiline suure eraldusvõimega leht.
Pange aga tähele, et paberi suuruse ja eraldusvõime eelised kuvaritega võrreldes kaovad 5–10 aasta pärast: juba on müügil sülearvutite kahe megapikslusega LCD-ekraanid; IBM tutvustas hiljuti 22-tollist LCD-d hämmastava 9-megapikslise ekraaniga, mis konkureerib trükitud lehega (praegu on see väga kallis, kuid kindlasti hind langeb), ja Miscosofti alampikslitehnoloogia ClearType (TM) suurendab oluliselt teksti efektiivset eraldusvõimet ja mustvalged pildid, mõnikord 300%. Lisaks on uuematel LCD-del laiem vaateväli ja need ei vilgu. Lähitulevikus saab pliiatsisisendiga tahvelarvuteid ajakirja moodi hoida ja nendega manipuleerida, need on osutamiseks, joonistamiseks ja kirjutamiseks paremad kui hiired ja klaviatuurid ning neid täiendavad hääle ja heli sisend/väljund. Valmimas on väga suured ekraanid ning kantavate arvutite võrkkesta ekraanid, mis pakuvad tõeliselt kõrge eraldusvõimega stereoskoopilisi pilte, mis näivad kandjale 3 meetri laiusena.
(Q) Milliseid uusi võimalusi pakub veebitehnoloogia kujundamine?
Veeb pakub rikkamat teabekeskkonda, kui see on paberkandjal staatiliste lehtede korral võimalik, nagu näiteks:
Ajakohane teave: veebiteave ei saa olla ainult ajakohasem kui paberkoopia, vaid võib olla ka hetkeline, nagu näiteks liikluse veebikaamerate, piletite broneerimise, laoaruannete, GPS-i näitude jne korral.
Kasutaja juhitav animatsioon: paberil animatsiooni simuleerimiseks kasutatakse tavaliselt väikseid kordseid, kuid veeb pakub palju suuremaid võimalusi, näiteks
reaalajas liikumine
kasutaja juhitav kiirus ja suund (edasi ja tagasi)
kasutaja valitud alamhulkade animatsioon, nii et konkreetseid üleminekuid saab jälgida erineva kiiruse ja suunaga
blokeerige kaadrid, mis hõivavad ühe või mitu kaadrit animatsioonides
reaalajas reageerimine sisendile, mis saadakse kas kasutajalt või välistelt allikatelt
3D-graafika: keerukate 3D-stseenide jaoks paberil on sageli keeruline leida õiget vaatepunkti, kuna iga üksik vaade või isegi vaadete kogum võib olulist teavet peita või moonutada. Kuid VRML-i või muude programmide pakutavad veebi 3D-andmete visualiseerimised võimaldavad kasutajal andmeid vaadata mis tahes nurga alt. Aastaid tagasi nägin J.W Tukey inspireerivat meeleavaldust, kes uuris interaktiivselt mitmemõõtmelisi (10–12-mõõtmelisi) andmekogumeid. Algselt olid kõik ilmunud juhuslike mõttetute punktide komplektid, kuid kui ta varises andmeid mööda teatud mõõtmeid ja rakendas pöördeid, tekkisid tugevad ja lihtsad kurvid, mis illustreerisid olulisi seoseid.
Ehkki on tõsi, et 3D-objektide juhtimine on tänapäeval mõnevõrra keeruline, kuna tavaliselt teeme seda hiire abil 2D-pinnal, on see lähitulevikus hõlpsam atraktiivsete ja kergete peakomplektide kaudu, mis pakuvad tõelist stereoskoopilist nägemust koos stereokaameratega mis jälgivad 3D-piltide käeasendeid, võimaldades meil 3D-pilte "võtta" ja nendega manipuleerida sama hõlpsalt kui reaalse maailma objekte.Suure tihedusega graafika: kuigi paberkoopia pakub kõrgemat eraldusvõimet kui praegused kuvarid, võimaldavad teatud veebitehnoloogiad suumida, et vaadata andmekogumeid palju detailsemalt kui paberil on võimalik.
Uuritav andmete analüüs: veeb võimaldab mitte ainult vaadata, vaid ka manipuleerida ja rakendada andmete teisendusi, et avastada seoseid, mida paberil ei olnud kunagi võimalik jälgida.
Universaalsed infoseadmed: veeb võib eriti juhtmevaba juurdepääsu kaudu siduda omavahel kogu teabe vormi, mida tänapäeval pakuvad paljud erinevad seadmed: kellad, äratuskellad, raadiod, televiisor, ajalehed, ajakirjad, raamatud, CD-d, arvutid, videomängud, juriidilised, finants- ja meditsiinilised dokumendid, litsentsid, load, klassiruumid, teatrid jne.
(Q) Millised on veebidisainides levinumad vead?
Kõige tüütumate disaini puuduste hulgas, mida ma sageli näen, on:
Kuupäeva/kellaaja teabe puudumine: enamik teavet on mingil määral ebastabiilne. "Viimati-muudetud-kuupäev" on enamiku saitide jaoks hädavajalik ja igal lehel olevatest ajast sõltuvatel andmetel on vaja ajadokumentatsiooni.
Segane navigeerimine, navigeerimist keelavad aknad või liiga palju hüpikaknaid.
Alglehed, mis laaditakse liiga aeglaselt või vajavad lisandprogramme või erakorralisi ressursse või brauserite keelavaid skripte.
Saiditeabe, näiteks saidi kaardi ja kontaktteabe puudumine
Segadust tekitav segane paigutus, pikad lõigud, segav graafika, hägune taust, värvi ebajärjekindel kasutamine (erinevad värvid samas teemas või sama värvid erinevates teemades), muaree-efektid.
Tundlikkus tehniliste või kasutajapiirangute suhtes: veebilehed peaksid pakkuma alternatiivseid vaatamisressursse neile, kellel on piiratud brauserite, arvutite või füüsiliste piirangutega kasutajad.
© Autoriõigus 2000 Washingtoni ülikooli infotehnoloogia ja kommunikatsioon.
Larry Gales