Original versjon på engelsk finner du her.

Merk:> En oversettelse av denne siden er tilgjengelig: på polsk 

og på russisk 

og på spansk 

og i Punjabi 

og på hindi levert av BorderCollieTalk   

og på estisk levert av besteonlinecasinoinorge.com   

og på urdu levert av MobileMail   

og på indonesisk 

og på bulgarsk 

og på slovensk 

Oversettelse til portugisisk for https://www.homeyou.com/~edu/ Følgende sett med spørsmål og svar om nettdesign danner grunnlaget for en artikkel i det franske magasinet “Influx” hvor jeg ble intervjuet om innflytelsen fra Edward Tufte’s designprinsipper slik de gjelder på sider på nettet.

Merk: Klikk her for å lese hviterussisk oversettelse  

Merk: Klikk her for å lese den portugisiske oversettelsen (levert av Travel-ticker.com)   

Indeks

(Q) Hva er problemene fra Edward Tufte’s verk som er relevante for et nettsted?

Problemstillingene jeg synes er mest relevante er:

• Utskriftsmedier: forfattere av hardkopi kjenner til målmediet, men webinnhold kan gjengis på radikalt forskjellige enheter når det gjelder størrelse, oppløsning og til og med selve medietypen (avanserte arbeidsstasjoner, små bærbare datamaskiner, PDAer, punktskrift, talte ord osv.)

   

• Brukernes forventninger: Nettbrukere nærmer seg informasjon på en annen måte enn på papiret og er mer sannsynlig å skanne informasjon enn å lese den

   

• Ergonomi: den nåværende teknologien for nettlesing er mye dårligere enn papir på mange måter. Skjermene har lav oppløsning, visningsposisjonen er fast, og mus- / tastaturkontrollene er veldig vanskelige sammenlignet med blyant og papir

   

• Innholdsplass: mye av websideplassen tas opp av menyer, verktøylinjer og navigeringskontroller, og reduserer dermed plass for innhold

   

• Stavefeil: disse forårsaker faktisk feil på navigering og søk i motsetning til bare forlegenhet eller forvirring

   

• Konvertering til papirkopi: dette mislykkes ofte på grunn av manglende skrifttyper, mangler grafiske konverteringer, samt størrelse og layout problemer

   

• Forvirring og misinformering: den lave oppløsningen til gjeldende skjermer kombinert med flimring av CRT-skjermer betyr at rot og moire mønstre trekker enda mer fra en skjerm enn på papir og bidrar til utmattelse og forvirring

   

• Farger: den lave oppløsningen på skjermer og den enkle og gratis prisen for farger betyr at farger enten kan brukes til å overføre informasjon mer effektivt (for eksempel når alle elementene i et enkelt emne deler samme farge ) eller kan misbrukes for å forverre forvirring

   

• Dokumentasjon av data: fordi det er langt lettere å kaste opp en webside enn å publisere en artikkel i et tidsskrift eller magasin, og fordi søkemotorer kan mudre opp en side basert på nøkkelord, er det mye større sannsynlighet for å møte søppelkunnskap på Internett. Jeg ser et sterkt behov i fremtiden for å ha nettsteder sertifisert på en eller annen måte for å sikre kvalitetsinformasjon og å ha søkemotorer som er sensitive for denne sertifiseringen

   

• Informasjonstetthet: den lave oppløsningen på skjermene og de langsomme nedlastingstidene for store filer gjør informasjon med høy tetthet mindre ønskelig på nettet. Forskjellige teknikker kan brukes til å kompensere for dette, for eksempel dokumentasjon av filstørrelser og nedlastingstider, valg av forskjellige oppløsningsgrafikker, samlinger av miniatyrbilder og / eller beskårne bilder som, når de klikkes på, viser en høyoppløselig versjon av miniatyrbildet, etc.

   

• Tekst versus grafikk: nedlastingstider, forskjellige nettlesermuligheter og oppløsningsproblemer tipper balansen mellom tekst og grafikk mer mot tekst

   

• Sekvensiell versus gestaltforståelse: Tufte påpeker at grafikk med høy tetthet på papir lar deg se komplekse mønstre som en enkelt gestalt. Imidlertid kan interaktive nettdisplayer føre deg sekvensielt, men trinn som bare utsetter deg for konteksten du trenger å vite basert på dine tidligere valg, i stedet for et visuelt telefontre. I noen tilfeller er dette mer effektivt enn en skjerm med høy tetthet, i andre tilfeller er det mindre

   

• Opprettholde kontekst: det er mye lettere å gå seg vill på et nettsted enn en bok fordi det er så mange veier å gå. Derfor er effektive navigasjonsverktøy mye viktigere på nettet enn for papirkopi

Tilbake til indeksen

(Q) Hva er dine anbefalte nettsteder når det gjelder innhold, grafisk relevans, estetikk og effektivitet, og hvorfor?

Blant nettstedene jeg liker best er:

• NASA Skywatch- nettstedet på: http://spaceflight.nasa.gov/realdata/sightings/index.html.

Den gir informasjon om mange store satellitter i bane. Den første siden forklarer formålet i både tekst- og streaming-medieformat, diskuterer ressursene som trengs når det gjelder nedlastingstid og filstørrelse, og inneholder en fin to-lags navigasjonskontroll som leder deg til hvilken som helst del av NASA-nettstedet.

Java-appleten gir informasjon om satellitter og orbitalposisjoner som betjener både teknisk ingeniør og publikum gjennom tabeller og et fargekart over merkede banespor mot identifiserte og skisserte konstellasjoner for et gitt sted. Den er enkel å bruke , attraktiv og svært informativ.

• Et annet godt nettsted er: http://www.nsf.gov Den første siden er attraktiv, kompakt, bruker lite grafikk og lastes ned raskt. Den inneholder også en fin todelt navigasjonskontroll, kontakt, personvern, hjelp og tilpasningsinformasjon, et søkeverktøy, valg for kategoriens seer (studenter, lærere, prinsippetterforskere ), og mange av de påfølgende sidene tilbyr flere valg for visse data, for eksempel HTML, ren tekst og PDF-format. Mange, men ikke alle, sider har det samme utseendet og navigeringskontrollene til hjemmesiden.

   

• Noen eksepsjonelt informativ grafikk kan du finne ved å klikke på et “Kart over markedet” på: http://www.smartmoney.com/maps/

Selv om den i utgangspunktet åpner med en helt ubrukelig og irriterende annonse som forblir på skjermen i lang tid og ikke gir deg noen anelse om hva som følger, er den resulterende skjermen vel verdt det. Den inneholder representasjoner av mange aksjer, gruppert etter sektor, og kodet etter fargede områder hvis størrelse gjenspeiler markedsandelen, og hvis fargetone og intensitet viser aksjeprestasjonen: lys rød som betyr bratte fall, svart betyr ingen endring og lys grønn som indikerer sterke gevinster , med mellomliggende nyanser i mellom. Når jeg ser på dagens skjerm, kan jeg se at teknologi-aksjer er helt nede, energilager er oppe, i likhet med forbrukerstifter. Jeg kan se en sektor mer detaljert, kan holde musen over et område for å identifisere den spesifikke aksjen og få litt ytelsesinformasjon, og jeg kan klikke på aksjen for å få detaljert informasjon. Den inneholder også et panel som lar deg tilpasse kartet. Det er et godt eksempel på multifunksjonsgrafikk som lar deg se informasjon på mange forskjellige måter.

Tilbake til indeksen

(Q) Hvordan kan et nettsted gjøres effektivt, interessant og attraktivt for nettsurferen så vel som for den vante brukeren?

Et godt nettsted inneholder følgende:

• Den er basert på et brukersentrert (i motsetning til bedrifts-, strukturelt eller annet synspunkt), brukertestet design

   

• Den første siden inneholder enkel, lavteknologisk HTML som lastes raskt, ikke krever plugins, fungerer på nesten alle nettlesere, plasserer den viktigste informasjonen nær toppen og viser folk med en gang:
  • hvilke emner den dekker eller hvilke problemer den tar opp
  • om den har den informasjonen de søker
  • om informasjonen er oppdatert (f.eks. dato sist endret)
  • bevis for at informasjonen er nøyaktig

     

• Startsiden har en identifiserende logo og inneholder eller har lenker til:
  • et område på kartet
  • Kontaktinformasjon
  • informasjon om den ansvarlige organisasjonen
  • et tilbakemeldingsskjema for nettstedet eller tips til en diskusjonsgruppe
  • forklaringer om sikkerhet og personvern
  • relaterte nettsteder
  • Informasjon om teknologien som trengs for å se påfølgende sider på nettstedet (f.eks. Nettleserversjoner, nødvendige nedlastinger, filstørrelser eller egne nedlastingstider)

     

• Påfølgende sider på nettstedet har mange av kvalitetene til den første siden, men også:
  • bruker samme utseende som hjemmesiden når det gjelder utseendet og plasseringen av logoen og annen informasjon som unikt identifiserer nettstedet (eksterne stilark er nyttige for dette)
  • gir konsistente navigasjonskontroller som ser like ut og er på samme sted, for eksempel knappene “Neste”, “Forrige” og “Hjem” (unngå spesielt sider der “Tilbake” -knappen ikke fungerer)
  • viser kontekst og plassering: På komplekse nettsteder er det veldig viktig å vite hvor du er, og hvor du har vært. Mens rammer utgjør store bruksproblemer , brukes de noen ganger til å gi en innholdsfortegnelse som forblir konstant på hele nettstedet. URL-er som bare inneholder enkle ord og uten symboler, kan hjelpe til med å identifisere plassering på et nettsted, samt trediagrammer som fremhever brukerens nåværende plassering
  • kontrollerer vinduer riktig: En spredning av vinduer som holder seg oppe forårsaker rot og forvirring (samt sikkerhetsrisiko hvis brukeren gjør mer enn å surfe), men vinduer som automatisk lukker seg selv, kan skremme og forvirre brukeren: webdesigneren må veie slike spørsmål basert på omstendighetene som gjelder

     

• Alle sider bruker:
  • en dempet bakgrunn som ikke forstyrrer liggende informasjon
  • god kontrast mellom bakgrunn og tekst eller kontroller
  • lyse farger sparsomt for å markere viktig innhold
  • samme farge for alle elementene som tilhører samme kategori
  • tekst med mindre grafikk gir en reell fordel
  • synlig strukturell informasjon, som titler, undertitler og punktlister i stedet for lange avsnitt
  • hvite rom som hovedavgrensning
  • betydelig redusert tekst sammenlignet med papirkopi
  • stavekontroll for å sikre at navigasjons- og søkefunksjonene fungerer

Tilbake til indeksen

(Q) Bør et nettsted være vakkert for å være effektivt?

Til en viss grad er skjønnhet i øynene til betrakteren ved at en bruker som er opplært til å tolke visse mønstre, kan se skjønnhet på et nettsted som gir mening for dem, men virker stygt og uorganisert for noen uten deres bakgrunn (ofte ser vi det vi forventer heller enn det som er der, snarere som en frosk som stort sett er blind for alt som ikke er lite, mørkt og beveger seg rykkete – en flue).

Imidlertid, for nettsteder som ikke krever spesialisert kunnskap, tror jeg estetikk kan oppnås gjennom et tydelig design som understreker brukervennlighet, spesielt hvis estetiske tillegg bare blir lagt til når de bevisst er begrunnet med hensyn til deres nytte.

Tilbake til indeksen

Hva påvirker skjermstørrelse og oppløsning på grafikk på nettet, og hvordan utvikler du effektiv grafikk under disse begrensningene?

Dette er et stort og viktig tema og er kanskje årsaken til de store forskjellene mellom design på nettet versus papir:

• Forskjeller i størrelse: Hvis vi begrenser diskusjonen vår til “tradisjonelle” datamaskiner og skjermer, påvirker ikke forskjellene i skjermstørrelse (i motsetning til oppløsning) grafikkforståelsen i stor grad, siden store 19-tommers skjermer bare har 2,5 ganger arealet til små 12 tommers skjermer. Imidlertid ser vi nå et økende antall enheter, som PDAer, mobiltelefoner og til og med armbåndsur, som surfer på nettet og hvis skjermer er 100 ganger mindre. Typiske websider passer ganske enkelt ikke på slike enheter, og sideutforming må være målrettet spesielt for dem, selv om XML / XSL ofte kan brukes til å re-formatere større dokumenter slik at de passer.

Sammenlignet med store utfellbare kart eller sider som gjør at øyet enkelt kan sveipe over store områder, er nettvisningen avhengig av lenker til flere sider som inneholder deler av visningen, og slik går den totale konteksten tapt – alle som bruker et boktypekart vet hvor vanskelig det er å følge en rute som krysser forskjellige sider; På samme måte er sammenligninger i et stort vitenskapelig diagram veldig vanskelig å gjøre når betrakteren ikke kan se alt på en gang.

I tillegg har nåværende LCD-skjermer begrensede visningsvinkler, så selv om de var store eller høye oppløsninger, ville de vanskeliggjøre forståelsen over store områder.

• Forskjeller i oppløsning: disse er enda viktigere enn størrelse. Teoretisk sett vil til og med en side designet for en 20-tommers skjerm passe på et armbåndsur hvis oppløsningen var den samme, men skjermbilder med lav oppløsning tvinger ikke bare brukeren til horisontal rulling, men kan heller ikke gjengi store deler av den.

Sammenlignet med papir har skjermer som er vanlig i dag, fem til ti ganger mindre oppløsning. Som et resultat er detaljer grove, liten tekst er svak og uklar, og visning er slitsom, spesielt når skjermflimmer er til stede. Også den generelle konteksten går tapt, noe som tvinger brukeren til å huske og koble informasjon fra tidligere skjermer, noe som menneskesinnet er dårlig egnet for.

På den annen side gir nettet verktøy som delvis kompenserer for dette:

• til tross for visse ulemper ved brukervennlighet, spesielt med hensyn til navigering, kan man bruke rammer til å vise en helhetsvisning av en scene i en ramme i form av et klikkbart bildekart: når brukeren klikker på et område i oversiktskartet, vises en høyoppløsnings del av bildet i 2. ramme. Dette er spesielt effektivt hvis bildet i den første rammen fremhever området som ble klikket på, viser gjeldende museposisjon i forhold til kartet, og hvis bildekartet inneholder en stor mengde overlapping, samt varierende grad av zoom, noe som forbedrer sjansen for å vise all kontekst som er ønsket.
  • noen ganger kan animasjon brukes effektivt i stedet for “små multipler”: et jevnt og raskt skiftende bilde, spesielt når det er under full brukerkontroll, kan ofte formidle informasjon bedre enn en statisk høyoppløselig side
• Vær imidlertid oppmerksom på at størrelses- og oppløsningsfordelene ved papir i forhold til skjermer vil forsvinne om 5-10 år: allerede to megapiksler LCD-skjermer på bærbare datamaskiner er på markedet; IBM avduket nylig en 22-tommers LCD-skjerm med fantastiske 9 megapiksler som konkurrerer grundig med den utskrevne siden (for tiden er det veldig dyrt, men vil helt sikkert falle i pris), og Microsofts ClearType (TM) underpikselteknologi forbedrer den effektive tekstoppløsningen sterkt. og svart / hvitt-bilder, noen ganger med 300%

I tillegg har nyere LCD-skjermer et bredere synsfelt, og de flimrer ikke . I den nærmeste fremtiden kan nettbrett-pc-er med stylusinngang holdes og manipuleres omtrent som et magasin, er mer overlegne for å peke, tegne og skrive enn mus og tastaturer, og vil bli forsterket av tale- og lydinngang / -utgang. Veldig store skjermdisplayer er på vei, så vel som netthinnedisplayer for bærbare datamaskiner som gir ekte høyoppløselige stereoskopiske bilder som brukeren ser ut til å være 6 meter brede.

Tilbake til indeksen

(Q) Hvilke nye potensialer tilbys for design av webteknologi?

Internett kan gi et rikere informasjonsmiljø enn det som er mulig med statiske sider på papir, for eksempel:

• Oppdatert informasjon: Nettinformasjon kan ikke bare være mer oppdatert enn papirkopi, men kan være øyeblikkelig som i tilfelle trafikk-webkameraer, billettreservasjoner, lagerrapporter, GPS-avlesninger, etc.

   

• Brukerstyrt animasjon: små multipler brukes vanligvis til å simulere animasjon på papir, men Internett gir langt større muligheter, for eksempel
  • sanntids bevegelse
  • brukerkontroll av hastighet og retning (forover og bakover)
  • animasjon av brukervalgte undergrupper slik at bestemte overganger kan observeres i varierende hastigheter og retninger
  • fryse rammer som fanger en eller flere rammer i animasjoner
  • sanntidssvar på innspill levert fra brukeren eller eksterne kilder

     

• 3D-grafikk: det er ofte vanskelig å finne riktig synspunkt for komplekse 3D-scener på papir, ettersom en enkelt visning eller et sett med visninger kan skjule eller forvride viktig informasjon. Men 3D-datavisualiseringer på nettet, som levert av VRML eller andre programmer, tillater brukeren å se dataene fra alle vinkler. For mange år siden så jeg en innsiktsfull demonstrasjon av JW Tukey som utforsket flerdimensjonale (10-12 dimensjon) datasett interaktivt. Opprinnelig var alt som dukket opp, sett med tilfeldige meningsløse prikker, men da han kollapset data langs bestemte dimensjoner og brukte rotasjoner, dukket det opp sterke og enkle kurver som illustrerte viktige forhold.

Selv om det er sant at kontrollen av 3D-objekter er noe vanskelig i dag, da vi vanligvis gjør det gjennom en mus på en 2D-overflate, vil det være lettere i nær fremtid gjennom attraktive og lette hodetelefoner som gir ekte stereoskopisk syn kombinert med stereokameraer som sporer håndposisjoner i 3D, slik at vi kan “gripe” og manipulere 3D-bilder like enkelt som vi gjør objekter fra den virkelige verden.

• Grafikk med høy tetthet: selv om papirkopi gir høyere oppløsning enn gjeldende skjermer, kan du bruke visse webteknologier til å zoome inn for å se datasett langt mer detaljert enn det som er mulig på papir.

   

• Utforskende dataanalyse: Internettet tillater at man ikke bare kan se på, men manipulere og bruke transformasjoner til data for å avdekke forhold som aldri kan bli observert på papir

   

• Universelle informasjonsenheter: nettet, spesielt gjennom trådløs tilgang, kan knytte sammen alle former for informasjon som i dag er gitt av mange forskjellige enheter: klokker, alarm klokker, radioer, TV, aviser, magasiner, bøker, CDer, datamaskiner, videospill, juridiske, økonomiske og medisinske poster, lisenser, tillatelser, klasserom, teatre , etc.

Tilbake til indeksen

(Q) Hva er de vanligste feilene som finnes i webdesign?

Blant de mer irriterende designfeilene jeg ofte ser er:

• Mangel på informasjon om dato / tid: mest informasjon er ustabil til en viss grad. En “dato sist endret” er viktig for de fleste nettsteder, og alle tidsavhengige data på en side trenger tidsdokumentasjon

   

• Forvirrende navigering, vinduer som deaktiverer navigering, eller for mange popup- vinduer

   

• Startsider som lastes inn for sakte eller krever plugins eller eksepsjonelle ressurser, eller skript som deaktiverer nettlesere

   

• Mangel på nettstedsinformasjon, for eksempel et kart over nettstedet og kontaktinformasjon

   

• Rot i form av en forvirrende layout, lange avsnitt, distraherende grafikk, glorete bakgrunn, inkonsekvent bruk av farger (forskjellige farger innenfor samme tema eller samme farge for ulike emner), moire mønstre

   

• Ufølsomhet overfor tekniske eller brukergrenser: Nettsider bør gi alternative visningsressurser for de med begrensede nettlesere, datamaskiner eller fysiske begrensninger.

Tilbake til indeksen

© Copyright 2000 University of Washington Computing & Communications.

Larry Gales