Designmönster Designmönster Mattias Arvola, matar@ida.liu.se En beskrivning av en viss kontext, där ett antal drivkrafter uppträder återkommande, och en viss konfiguration av features tillåter dessa drivkrafter att lösa sig. Återkommande konflikter mellan drivkrafter ställs som ett problem och konfigurationen av features ställs som en generisk men omedelbart identifierbar lösning. Vidare ges pekare till mönster på lägre nivå som kan användas för att sätta samman lösningen. Saker som kännetecknar en situation och påverkar livet: Drivkrafter Vad folk behöver, är rädda för, trånar efter, önskar sig, vill, begränsar sig och blir begränsade (mänskligt, socialt och fysiskt). I designmönster anses en situation utan motsättningar mellan drivkrafter som en bra situation. Alexanders mönsterspråk Reaktion mot modernismen Att lösa drivkrafter i konflikt Ett återkommande problem, dess kontext, drivkrafterna i situationen och en lösning. Lösningen är generiskt skriven, men konkret Ska leda till oändligt antal specifika designer Omedelbart identifierbar En arbetshypotes Kritik mot designmönster Varför arkitektursammhället har ignorerat Alexanders arbete: Ett uttryck för utopism, essentialism, och miljömässig determinism Mönstrera saknar bevis på kritiskt tänkande och noggrann forskning Värdena som är inbäddade i mönstren hanteras som om de vore universella och absoluta Men mönster ska inte användas som recept De ska ses som fantasifulla och diskutabla beskrivningar av insikter om hur man ska lösa behov som potentiellt står i konflikt De är medel för att bena ut de sociala och upplevelsemässiga anledningarna för vissa designlösningar
Aktivitetsmönster (Guy 2004) Designmönster ihop med socio-kulturell verksamhetsteori (activity theory) Mänsklig verksamhet konceptualiseras på tre nivåer: verksamhet, handling och operation Aktivitetsmönster görs på dessa tre nivåer Objektet för IxD kan också beskrivas på dessa nivåer (Arvola, 2005) Den högsta nivån Drivs av motiv Verksamhet Exempel: att redigera ett specialnummer av en tidskrift och motivet skulle vara att nå den slutgiltiga versionen av specialnumret. Handling Operation Att skriva en anteckning är en handling Den är medveten Den drivs av ett uttalat mål: att uppnå anteckningen är målet Att klicka på en knapp i ett bekant grafiskt användargränssnitt En omedveten operation som drivs av omständigheter i miljön 5 nivåer av IxD-mönster (van Welie & van der Veer 2003) Affärsmålsmönster Posture patterns Tasks patterns Action patterns User experience patterns Överlappar med Guys aktivitetsnivåer Business goals patterns Finns på en organisatorisk verksamhetsnivå Består av komplex av verksamheter och delade motiv inom organisationer
Är vilken sorts system som byggs, i termer av dess syfte e-handelsapplikation, personaliserad portal eller en online community som ska designas? Posture patterns Kopplar samman motiv på en högre nivå i bruket med affärsmål. User experience patterns refererar till användarnas verksamhet spela informera shoppa browsa söka Task patterns Action patterns Samma som handling i verksamhetsteori Task patterns beskriver sekvenser och interaktionsflöden över olika objekt Samma nivå som operationer i verksamhetsteori Beskriver små delar av tasks såsom tryckknappar, inloggning och val Brukskvalitetsanalys: Denna situation bör kännetecknas av [ ] Konflikter mellan önskvärda brukskvaliteter noteras, vilka utgör grunden för problmet i mönstret Hur man tar fram mönster Särdrag i situationer där konflikten inte finns noteras för att finna möjliga lösningar Nivåer av IxD Miljö för interaktion: WORKSPACE WITH PRIVACY GRADIENT Medel för interaktion: COMBINATIONS OF PERSONAL AND SHARED DEVICES Gränssnitt för interaktion: DROP CONNECTOR
Generella mönster kontra unika design situationer Att leva sig in i tidigare designprojekt hjälper en designer att känsliggöra sig i sin komposition av en ny specifik unik design, men det erbjuder inga färdiga lösningar för framtida design Designmönster exempel Material object qualities influence interaction qualities (Löwgren 2005) It is common knowledge in industrial design that certain material forms and properties afford certain types of manipulation. Exempel Vala s Runecast. the user interacts // by moving rocks on a bed of white sand // Since the rocks are rather heavy, the moves have to be made quite slowly and tentatively, which works well to reinforce the general enigmatic and reflective nature of the piece Instant Gratification People like to see immediate results from the actions they take it s human nature. If someone starts using an application and gets a success experience within the first few seconds, that s gratifying! He ll be more likely to keep using it, even if it gets harder later. Exempel: Word One-Window Drilldown Your application consists of many pages or "panels" of content for the user to navigate through. They might be arranged linearly, or in a hyperlinked network, or -- most commonly -- hierarchically. Address books, calendars, email readers, and other familiar software often follow this kind of organizational scheme. One or both of these constraints might apply to you: You are building for a device with tight space restrictions, such as a handheld, a cellphone, or a TV (as in the example above). On these miniature screens, Overview Plus Detail is impractical, because there just isn't enough room to do it well. Even if you are building for a desktop or laptop screen, you may have a complexity limit. Your users may not be habitual computer users -- they might have little patience with (or understanding of) having many application windows open at once, for instance. Or they may not deal well with complex screens or fiddly input devices. Users of information kiosks fall into this category; so do novice PC users.
Why: Keep it simple. When everything's on one screen or window, the options at each stage are clear, and the user knows they don't need to focus their attention anywhere else. // One-Window Drilldown is an alternative to several of the higher-density patterns and techniques discussed here. As pointed out above, Overview Plus Detail may not fit, or it may make the screen layout or interactions too complex for the typical user. Tiled windows, Closable Panels, Movable Pieces, and Cascading Lists also have space and complexity issues. They don't work on miniature screens or novice-intended interfaces. One-Window Drilldown exempel How: You are given a window to work with -- a miniature screen, or a fullsized screen, or a browser window, or an application window that lives on the desktop alongside other apps. Structure your content into panels that fit gracefully into that window; not too large, not too small. From TiVo, http://tivo.com Shopping Cart (van Welie 2006) Problem Users want to buy a product Use when A site where users can browse through products and buy them. Users are not very frequent buyers and are possibly novices. For returning customers, consider a ONE-CLICK SHOPPING system. Users may buy more than one product. Users may want to select products now but pay later. Users may decide to purchase somewhere else at any time Solution Why Introduce a shopping cart where users can put their products in before they actually purchase them. The shopping cart is a very well known and international metaphor. This pattern allows users to gather all products first and pay for them all at once and whenever they want. By showing the total costs including shipping the users know exactly what they will have to pay when they decide to purchase. The checkout procedure using a Wizard helps users to accomplish the actual purchase with all possible assistance. Shopping Cart exempel Overview plus Detail From www.waterpik-store.com You need to present a large amount of content -- messages in a mailbox, sections of a website, frames of a video -- that is too big, complex, or dynamic to show in a simple linear form. You want the user to see the overall structure of the content; you also want the user to traverse the content at their own pace, in an order of their choosing
Why It's an age-old way of dealing with complexity: present a high-level view of what's going on, and let the user "drill down" from that view into the details as they need to, keeping both levels visible for quick iteration. Overview Plus Detail breaks up the content into comprehensible pieces, while simultaneously revealing their interrelationships to the user. // Finally, the overview can serve as a "You are here" sign. A user can tell at a glance where they are in the larger context. In the example above, the scrollbar shows that the visible message is near the end of the mailbox. How The overview panel serves as a selectable index or map. Put it on one side of the page. When the user selects an element in it, details about that element -- text, images, data, controls, etc. -- appear on the other side. (Usually the overview panel is at the top or left.) From the MATLAB Signal Browser Magnetism Magnetism exempel Why: The user needs to position objects very precisely, such as next to other objects or against Guides. Magnetism helps compensate for users lack of perfect dexterity with a mouse. How: When the user drags an object closer to another object s edge, make it snap to the other object. Likewise, when it s dragged away, keep it there for a few pixels, and then let it move away En toolbar i Word som hakar fast, magnetiskt Closable Panels (Accordion) Why: You would use Closable Panels in many places where you might use a Card Stack it s a space-saving device that depends on a user clicking it to get at it. However, Closable Panels gives you a little more flexibility: It can contain sections of wildly differing sizes. There s too much stuff to present on the page, but you want it all only one click away. The content is divisible into clearly named sections, as with Titled Sections and Card Stack. The user may want to wee two or more at a time. The user can open several sections at once. The user can open several sections at once. How: Divide your content into sections, name them appropriately, and put them into panels that appear and disappear when you click a button ro link. Put an arrow, plus sign, triangle or chevron ( >> ) on that button or link doing so hints the user that something will open or close.