Identifying patterns and designing templates

April 28, 2008

5 dimensions of an interaction design (or rather: information design) pattern [1]:

  1. Words
  2. Visual design (incl. typography, icons,images)
  3. Spatial     (rhythm, breathing space, multiples)
  4. Temporal (a change or transition of state)
  5. Behaviour (action,operation,presentation,reaction)   {especially in visual design}

Aesthetic designs are perceived to be more usable than less aesthetic designs (this is called the aesthetic-usability effect) and interfaces become more usable when people enjoy using them. [Norman]

Screen elements vary in:

  • Content/text/label
  • Shown/invisible
  • Size
  • Position+alignment (relative to other elements+consistency), and distribution/spacing
  • location/page   (+page fluidity)
  • Style, look, visual
  • Behaviour (auto-player,loop)
  • Feel (=behaviour + transition)
  • Visual design (colour, balance, symetry, rhythm)
  • transition/rollOut/rollOver/mouseDown/mouseRelease/drag
  • Contents (with links), i/o data
  • Text and links (size, read more, click here
Advertisements

Paper magazines about interaction design

April 8, 2008

Subscription-based coffee table material relating to interaction design.
Have them lying around your reception kiosk while clients wait, to inspire and impress them or just to kill trees 😦

1).net
http://www.netmag.co.uk/
About the web. For the masses and businesses. High web 2.0 factor
Also available digitally $ 

2)Interactions
http://interactions.acm.org/
by ACM/SIGCHI  (quite academic)
6 issues/year
Requires membership ($50/year for individual, Institutional rates on offer).
This membership provides discounts to events like the CHI conference, as well as access to SIGCHI material in the ACM Digital Library – that’s handy!

3)UX magazine
http://www.usabilityprofessionals.org/upa_publications/user_experience/index.html
Often relevant articles
Membership fee: join UPA for $100 + $25 one-of administrative fee

4)Journal of Behaviour & Information Technology
EUR 373,-
Have some nice (academic) papers relevant to our audience and applications. Online also subscription is EUR 939
http://www.informaworld.com/smpp/title~content=t713736316

5)Digital Arts
British and popular. Packed with Tutorials and product news on many aspects of digital design.
£90
http://www.digitalartsonline.co.uk/

6)STEP Inside Design
http://www.stepinsidedesign.com/
$90 / year
Design in the broad sense, but with Web/Interactive Design and Business/Legal issues as important topics

7)BRIGHT
http://www.bright.nl/
Over wat de moderne, coole Nederlandse geek in algemeen bezig houdt. Vaak gadgets, heel soms ook sites/software.
Mobile en office zijn de categorieen die het dichtsbij komen. Heb thuis een kopie liggen, dat bewijst weer wat…

8)BIZZ
Voor ondernemers voornamelijk
http://www.123tijdschrift.nl/blad/bizz.html

9)NewWebPick and Connection
$2/copy ?
2 magazines focussing on websites and web design studio’s with a high ‘arty’ factor
http://www.newwebpick.com/
http://ezine.newwebpick.com/

Oh ooh, 2 more papers mags…

http://www.webuser.co.uk/

Though targeted at the user rather than the designer, one of their main activities is reviewing websites and software.

http://www.id-mag.com/currentissue/ $7/issue

Practical Web Design (topics for developers, bloggers, UX, etc)  – still more glossy than practical.

Others (Dutch): Emerce, Twinkle, Web Designer
Paper?: BusinessWeek, IT managers

More
http://www.nickfinck.com/blog/entry/user_experience_publications/


Desirability design

April 8, 2008

Desirability design is like emotional design. It aims at stimulating a person to want to use something, first when they see the box, then when the open it, and later when they have finished using it.

Ultimately, the desirabality of the page should increase by making it easy to use. Like a helpful person, it should communicate clearly and understandably , yet be likable to the person who will use it. When they see it, they should want to use it. After they’ve used it, they need to want to use it more. They need to be reminded of it in a way that if they think back to it, they would want to experience it again. In some design cases, the balance can shift from a usable design to a more visually stimulating way. Some designs are even built less user-friendly on purpose, in order to get more revenue.

For example, an article page might be filled with ads in between, or split up over several pages in order to make the user visit more pages (with different ads). (Which brings up the question of the effect of rotating ads in one place, and actually the effectiveness of page ads in general) . Some vagueness or white lie might be necessary to achieve success.

For example, the title of an article might be ‘bended’ in the right way, in order that the user is tricked enough for him to click the ‘read more’ link. After all every design is built to gain (product) success, by manipulating emotion.

For example, a sales site (for few products) might delibrately not have a search feature. If there is a search, it should include promo’s.

For example, the contact form or contact details might be hidden. Business requirements and testing their risks/consequences..

Whatever the case may be, an equilibrium must be found. Balacing business goals and user goals, where aesthetics and usability complement eachother. How can we show ads but maintain calmness? In the end, the user experience as a whole must not suffer. Affect the user emotionally negatively, and the user’s goodwill goes down.


Web interaction design with contraints

April 8, 2008

Constraints aren’t evil. Placing restrictions on what is ´allowed´ will save you time and help achieve your goals faster. Often dictated by the client, they are the restrictions narrowing the scope of the design space. Constraints are welcome in the design process.  They narrow the decision space so you don´t have to worry about every detail.

Take the analogy of looking for a holiday hotel. If you know that you want to go to Europe in the summer at certain dates and within a certain budget, you enter these as filters or options on the hotel booking website. By narrowing down, the selection of hotel options becomes smaller until you have found what you´re looking for. If you make decisions, it is easy to find a solution. Even if you have made the wrong decision, you will know in the end what doesn´t work for you. So making decisions and setting constraints helps.

Constraints are useful when there are too many design possibilities to chose from. In the creative process, the designer narrows the possible designs with knowledge of what is fixed, what works and what won´t work. By making up constraints a process of elimination takes place. Effectively you are limiting the amount of possible design solutions and speeding up working towards a final design. Constraints can mean less time to spend on a design and are considered highly desirable. Set constraints too soon, however, and you might come at a dead end.

If you still don´t understand what contraints are, take this example. You have been given the task of redesigning a webpage with an embedded video player in it. The designer was told to redesign the page (and the elements on it) so that it is more usable. Knowing that only the video player must change, and changing other things on the page is not feasible, this is useful. The designer then knows what to concentrate on, what not to change.  …

Sources of constraints

Constraints at first come from external sources. The source might be a manager’s ‘blue sky’ vision or a client demands perhaps. Constraints are sometimes hard like facts, or flexible like wishes. Constraints are not always set in stone, if it gives you too much trouble you can challenge the one who made it up.

For web interaction designers, the constraints may be:

  • Requirements specification
  • Product definition document
  • the design dimensions (resolution, page space for an element)
  • accessibility
  • technology/technical constraints (dictated by technical feasibility, format or available technical resources and employee skills)
  • SEO related constraints – is it relatively more important to have a flashy player/browser than it is to have a
  • applications of use  –  what will it be used for? …
  • audience – who will it be used for? what are their skills? …
  • Other: Browser/platform compatibility, performance, w3c code validation (javascript), text size
  • Resolution: the order button (or other call-to-action) must be above the fold.

It is often the designer’s task to find out what the constraints are by asking the right questions (to the right people). Finding constraints equals narrowing scope. Make it clear what consequences a constraint has ‘by dicating this requirement, you will get this, and not this’.

When there is a lack of constraints, or a vagueness about them, the designer’s task is made more difficult. It leads to dillemas and unknowns. At the other extreme of constraints is flexibility, a characteristic which describes the generic form of something. If there is a lack of constraints, you have to be creative.

It is easy to get stuck in constraints and detail. What you should then aim for is flexibility. Present a proof of concept, present the ideal design for one particular situation. In other words, make your own (realistic) assumptions of what would work. If you get stuck in constraints and details, ask the client for clarity. Start high-level, begin with what you know (collect all the facts that are fixed, static) and spiral down into detail.