1 / 21

Visuel interface design

Visuel interface design. John Paulin Hansen BFPW 27. Sept. 2011. Sano & Mullet . “( Visuel interface design)… drejer sig om at finde den repræsentation der er best egnet til at kommunikere en given information” Data -> information -> viden. Interface designere.

amanda
Download Presentation

Visuel interface design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Visuel interface design John Paulin Hansen BFPW 27. Sept. 2011

  2. Sano & Mullet • “(Visuel interface design)… drejer sig om at finde den repræsentationderer best egnettil at kommunikere en given information” • Data -> information -> viden

  3. Interface designere • “Designereafvisuellegrænsefalder …arbejder med detorganisatoriskeaspektaf design og med den mådehvorpåvisuelle cues og affordance kommunikererhandlingertilbrugerne. De focusererpå at forene den visuellestruktur med den logiskestruktur, somliggerbåde I brugernesmentalemodellerog I programmetsfunktionsmåde” (s. 289)

  4. Gestalt lovene

  5. Form

  6. Principper for design afvisuellegrænseflader • Brug de visuelle egenskaber (form, farve, størrelse m.m.) til at gruppere interface elementer og lav et tydeligt hierarki mellem grupperne: • Hvad er helt u-undværligt? • Hvad er sekundært? • Hvad skal kun anvendes undtagelsesvis?

  7. Visuellehierarkier

  8. Klarhed • “Establishing a clear visual hierarchy is one of the hardest challenges in visual interface design, and it takes skill and talent. A good visual hierarchy is almost never noticed by users – it is only the lack of one and an accompanying confusion that tends to jump out at most people” • S. 295

  9. Perceptuel lagdeling • Gruppér informationer i 7 +/-2 familier med max. 7 +/-2 medlemmer i henhold til Gestalt-lovene • Bestemt rangordenen imellem de enkelte familier • Slå de mindst betydningsfulde familier sammen eller ihjel • Skab en klar visuel adskillelse mellem de vigtigste familier og en klar visuel sammenhæng indenfor familierne • Brug knibeøvelsen til at sikre at hver familie ses som en enhed forskellig fra de andre

  10. Knibeøvelsen • Luk begge øjne • Åben det ene øje så lidt, at der lige akkurat kan anes et element på skærmen/papiret • Lav en cirkel med pege- og tommelfinger om området • Åben øjnene helt og se hvad der står i cirklen: • Er det det vigtigste på siden? • Hvem er det i familie med? • Fikser blikket midt i cirklen • Flyt cirklen til det sted i øjenkrogen, der trækker mest i blikket • Er det det næst-vigtigste på siden? • Hvem er det i familie med?

  11. Gridstrukturer

  12. Ret indefter grid • Grupperedeelementerskalståpålinie • Højre- ellervenstre-stillet? • Den atomare grid enhed: Den mindsteafstandderbrugestiladskillelse. Lavmellemrum med et multiplumaf den atomareenhed

  13. Ikoner

  14. Ikoner • Vis både handling ogobjekt • Pas påkultur-specifikkebetydninger • Undgåroverdrevendetaljering • Genbrugikonerneoveralthvordetermuligtså man kun skallæredemén gang

  15. Æstetik-usablity kortslutningen • Pænt design opfattes som mere brugervenligt • Pænt design skaber gode attituder til produktet - kælenavne • Rene biler kører bedre

  16. Husk at • Dæmpe • Dæmpe • Dæmpe • Ikkeoverdøve

  17. Tekstpåskærm • Lidtlangsommere at læsefraskærm • STORE BOGSTAVER ER SVÆRERE AT LÆSE END almindeligtekst • Højkontrast • Minimum 10 pixels • Sans-serif font fx. Verdana

  18. Øvelsensførste time • 9 grupper • Lav en designanalyseitekstogbillederafdetudleverede web-site sombeskriver: • De gennemgåendevisuelleelementer • Vigtighedenogrelationerne (hierarkiet) mellemelementerne • Den anvendtegridstruktur • Detlogiske flow (læseretningen) ned over siden • Farvevalg • Font-valg (antal, størrelseogfremhævninger – e.g. bold, kursiv, Capitaler) • Symmetrierog balancer • Ikonerogsymboler

  19. Øvelsensanden time • Lav et forslagtilhvordanwebsitetkunneredesigneshvisdetvillehenvende sig til et danskbrugerpå +30 årsomforetrækkerenkeltskandinavisk design (Ikea, B&O, Montana ogBørgeMogensen). • Forslagetmågernegenanvendegridstruktur, hierarki, font, farve, billeder, ikonerfradetoprindelige site.

  20. Øvelsessites • http://www.qq.com/ • http://www.sina.com.cn/ • http://www.vietnamworks.com/ • http://www.bellanaija.com/ • http://www.tfile.ru/ • http://www.kp.ru/ • http://www.nlcafe.hu/ • http://www.iddaa.com/index.htm • http://www.kariyer.net/

More Related