Kategorier av designmönster för rik interaktion

Yahoos Bill Scott talade på ETech i onsdags om företagets designmönsterbibliotek, Yahoo Design Pattern Library. Han postade sin presentation och sitt manuskript på sin blogg.

Det senaste året har vi sett Ajax framväxt och Javascripts och Flash återkomst. Vi är inte längre bundna till modellen att ladda om hela webbsidor. Denna förändring har fört med sig nya idiom för användarinteraktion på webben. Det spännande med dessa nya “interaktionsmönster” är att de gör det lättare att skapa engagerande interaktioner.

Med idiom menas etablerade lösningar, konventioner. Trots att utvecklingen gått snabbt (eller snarare just därför) har det växt fram konventioner för dessa “rikare” interaktioner som Ajax och Flash möjliggör. Syftet med designmönster är att beskriva sådana idiom, att beskriva problemet och hur det löses och ge ett antal exempel på hur sådana lösningar implementerats.

Bill Scott föreslog ett antal kategorier för dessa interaktioner och pekade ut olika designmönster ur biblioteket tillhörande respektive kategori.

• Omedelbarhet. Ajax gör det möjligt att presentera det som behövs när det behövs. Det har med relevans att göra och med att hålla information aktuell. Mönster: Live suggest (ännu ej dokumenterat), Auto-complete.
• Direkthet. “Om användaren måste gå igenom flera indirekta steg för att hitta information eller utföra sin uppgift, hur länge tror du att du kan behålla deras uppmärksamhet?” Direkthet handlar om att använda “direkt redigering, dra-och-släpp och andra mekanismer från skrivbordet”. Mönster: Drag and drop, Inline editing (ej dokumenterat).
• Inbjudande. Handlar om att fånga uppmärksamhet genom att artigt presentera förslag i rätt ögonblick. Mönster: Hover invitation, Tooltip invitation (båda ej dokumenterade).
• Gränslöst. Handlar om att föredra att stanna kvar på en sida, att undvika onödiga omladdningar. Mönster: Endless scrolling, In-context expand, Hover details (inga dokumenterade).
• Lätt fotavtryck (dvs. “light footprint”, hittade inget bra ord). “Användare kommer tappa intresse om uppgifter verkar för krångliga.” Det handlar om att göra det lättare att interagera, att göra tröskeln lägre. Mönster: Remembered collection (ej dokumenterad), Rating an object.
• Filmiskt. Handlar om animering använt med måtta. Övergångar, “transitions”, kan kommunicera samhörighet eller indikera vad som har ändrats. Mönster: Fade transition, Self-healing transition, Slide, Fade in, Fade out (inga dokumenterade).
• Rika objekt. “Om allt innehåll har samma nivå av rikedom” missar man möjligheten att skapa intresse. “Men förvandla en del av innehållet till ett objekt. Nu kan det bloggas, delas med sig av, sökas.” Handlar om det som Tom Coates kallade “first order objects” i sin presentation på The Future of Web Apps, dvs. att man identifierar det som utgör distinkta objekt i sitt innehåll och ger dem en unik (och permanent) URL. Jag förknippar det också med Jyri Engeströms “sociala objekt” från hans presentation vid Reboot 7, där det handlar om att skapa sociala situationer kring dessa objekt. Mönster: Shareable object (ej dokumenterat).

Som synes är de flesta mönster inte med i biblioteket ännu, men vill man hålla sig uppdaterad kan man prenumerera på Yahoo User Interface Blog.

(Via Erik Stattin och Luke Wroblewski.)