1 / 22

Visuel interface design

Visuel interface design. John Paulin Hansen BFPW 8. Oktober 2010. 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.

stew
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 8. Oktober 2010

  2. 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

  3. Interface designere • “Designere af visuelle grænsefalder …arbejder med det organisatoriske aspekt af design og med den måde hvorpå visuelle cues og affordance kommunikerer handlinger til brugerne. De focuserer på at forene den visuelle struktur med den logiske struktur, som ligger både I brugernes mentale modeller og I programmets funktionsmåde” (s. 289)

  4. Industrielt design

  5. Gestalt lovene

  6. Grafiske virkemidler

  7. Pop-op effekten (1)

  8. Pop-op effekten (2)

  9. Blikfangere • Kontraster (brud) i størrelse,mætning, farver, form, tekstur, position (2d og 3d) • Usædvanlige objekter - overraskelse, konflikt, nyhed, tvetydighed • Kompleksitet • Ansigter - især på baby og dyr • Bevægelser • Objekter for lyst og behov

  10. Principper for design af visuelle græ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?

  11. Perceptuel lagdeling • Gruppér informationer i 7 +/-2 familier med max. 7 +/-2 medlemmer • 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

  12. 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 læs hvad der står i cirklen • Fikser blikket midt i cirklen • Flyt cirklen til det sted i øjenkrogen, der trækker mest i blikket

  13. Husk at • Dæmpe • Dæmpe • Dæmpe • Ikke overdøve

  14. Ret ind efter grid • Grupperede elementer skal stå på linie • Højre- eller venstre-stillet? • Den atomare grid enhed: Den mindste afstand der bruges til adskillelse. Lav mellemrum med et multiplum af den atomare enhed

  15. Ikoner • Vis både handling og objekt • Pas på kultur-specifikke betydninger • Undgår overdreven detaljering • Genbrug ikonerne overalt hvor det er muligt så man kun skal lære dem én gang

  16. Tekst på skærm • Lidt langsommere at læse fra skærm • STORE BOGSTAVER ER SVÆRERE AT LÆSE END almindelig tekst • Høj kontrast • Minimum 10 pixels • Sans-serif font fx. Verdana

  17. Æ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

  18. Øvelsens første time • Del jer op i 9 grupper • Lav en designanalyse i tekst og billeder af det udleverede web-site som beskriver: • De gennemgående visuelle elementer • Vigtigheden og relationerne (hierarkiet) mellem elementerne • Den anvendte gridstruktur • Det logiske flow (læseretningen) ned over siden • Farvevalg • Font-valg (antal, størrelse og fremhævninger – e.g. bold, kursiv, Capitaler) • Symmetrier og balancer • Ikoner og symboler

  19. Øvelsens anden time • Lav et forslag til hvordan websitet kunne redesignes hvis det ville henvende sig til et dansk bruger på +30 år som foretrækker enkelt skandinavisk design (Ikea, B&O, Montana og Børge Mogensen). • Forslaget må gerne genanvende gridstruktur, hierarki, font, farve, billeder, ikoner fra det oprindelige site.

  20. Øvelsens tredie time • Læg designanalysen og forslaget til redesign ind på jeres blogs med en kommentar-mulighed • Reflekter kort skriftigligt (5 – 8 sætninger) på jeres blog over gruppearbejdsprocessen: Lederskab, arbejdsfordeling, diciplin, forventningsafstemning m.m.

  21. Ø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