Category Archives: DES134 Interaction Design Techniques

VIIM-A – explained

VIIM-A is a method for mentally unpacking Interaction Design problems. It is probably most useful when applied to Software related design projects but it can be used in a variety of Interaction Design contexts.

VIIM
VIIM stands for Visual, Interface, Interaction and Motivation.
In most Interaction Design projects the entire project context can be broken down into the following elements:

  • Visual – the things you see, including colour, form, layout, graphic design
  • Interface – the things you touch or manipulate, including buttons, pull downs, handles.
  • Interaction – the things you do. Verbs. Doing words. For example: uploading
  • Motivation – why you do the things you do. For example: because I am hungry.

– A
A is for analysis.
The amount of analysis that is appropriate for an Interaction Design problem varies based on the project particulars from a simple breakdown to an elaborate multi user study.

Below are some examples of the most basic VIIM Analysis. These examples have a repeatable format that is easy and quick to do. There are four rows of four images, each row corresponds to Visual, Interface, Interaction, Motivation.

The first row, the visual row is easy. Simply take photos of the current situation capturing what it looks like.
The second row is also easy, take photos of the parts you touch – the interface. You may wish to bring the Interface photos into Photoshop to add a semi transparent overlay to highlight the areas that you touch, a button for example.
The third row, the Interaction row is a little more difficult. As the Interaction happens over a period of time you are trying to capture what the person is doing. The four images are now a short storyboard. It is useful to add captions to help explain what is happening.
The fourth row, the Motivation row is more abstract and more difficult to photograph. Why does someone feel the need to book an airline ticket or cook a meal? A caption under each image helps to tell the story.

The four VIIM parts are inter-related and co-dependent. A visual change can quickly escalate into a change to the interface. A change in the interface can impact the style of Interaction. A change in Interaction would not really be required unless there was some change in the expected use case. A change in the user motivational perspective or use case can have a profound impact on all aspects of the design.

Toaster VIIM-A

Toaster VIIM-A (Kym McMurran)

Uniflow University payment system for printing

Uniflow University payment system for printing VIIM-A (Stephen McDevitt)

Creating a Word doc for University assignment VIIM-A

Creating a Word doc for University assignment VIIM-A (Martin Tyre)

 

 

Summary DES134 Interaction Design Techniques

DES134 Interaction Design Techniques- Module summary

  1. Interaction Design Jobs – what is Interaction Design?
  2. Back to the future of Computing – Ted Nelson/Roy Stringer
  3. Navihedrons – Technology: 3dMax, Export, Flash, WebGL
  4. Other aspects of a Navihedron Website: Accounts, Edit/Save, A database that is dynamically written
  5. A simple three frame storyboard
  6. An exemplar use case
  7. VIIM-A paper prototypes
  8. Presentations ranging from IoT (C+J) to Jesse Schell (Amy)
  9. Using the computer as a computer – to explore a context rather than search – proposal for characteristics of a new Navihedron
  10. Brenda Laurel –Computers as Theatre: Ignore the voice behind the curtain

Assignments

  1. Navihedron                               10
  2. Use case scenario                    10
  3. Interaction storyboards          20
  4. VIIM – A                                      30
  5. Project proposal                      15
  6. Reading presentations           10
  7. Attend                                         5

Navihedron Characteristics

Characteristics of a Navihedron (Proposal)

    • It tells a story – The story can be read from any of the 12 starting points depending on the readers point of view/interest. No matter where they start from the Navihedron still makes sense.
    • It is dynamically updated – content streaming from the web constantly updates the Navihedron. It is not a fixed content entity.
    • Drag and Drop – You can drag your own content in to a point and drop it there as a Nav point.
    • Relational – When you create the Navihedron you set the relational rules. Jump from one point to the next point only or jumps allowed to points deep or jump to anywhere (no rules).
    • Exploration not search – The Navihedron allows a user to explore interactively – in that sense it differs from a Search.
    • As content is added the Navihedron increases in Context – The Navihedron responds by updating itself when the user adds a new Nav point.
    • Suggestion Machine – The Navihedron is a suggestion machine – constantly giving you content suggestions.
    • Uses computer as a computer – The Navihedron uses the computer to search and to process and to suggest. (Ted Nelson)
    • Reversable – at any point (by some means, dependent on the design specifics) you can reverse in any exploration go backwards to where you came from. (Ted Nelsons back button?)
    • A double click creates a new Navihedron – A new Navihedron is created using the Nav point that is clicked as its start point when that point is double clicked
    • Rich links – The links that the Navihedron leads to are full of recorded – you knwo where you came from
    • Surprising content – Content should surprise and delight to keep the user interested

navihedron

DES134 Suggested use cases

A good variety of use cases were suggested for the Navihedron

  • Animation methods – stop motion
  • Storage navigation
  • Tattoo artists
  • Food websites – take away menu’s
  • Score system for games
  • Tourist office
  • To do app
  • School – history
  • Business owner – manage finance
  • Twitter trends
  • Games series navigator
  • Video game website
  • Allergy advice
  • Movie data for actors
  • Menu for restaurants
  • Styles of digital art
  • Communication system
  • Museum
  • CV
  • Sales tools for cars

DES134 Assignment schedule

Assignments list

  1. Navihedron                              10
  2. Use case scenario                  10
  3. Interaction storyboards        20
  4. VIIM – A                                    30
  5. Project proposal                     15
  6. Reading presentations           10
  7. Attend                                        5

Navihedron

–       zip file with models/3d max file

–       word doc describing progress

–       URL

Use case scenario’s (x3)

–       PDF

Describes the envisaged use case scenario (x3). Who uses the Navihedron site and why? What benefits do they get by using the site?

MIIV-A

Document (illustrated pdf) describing

Visual – what does the final piece look like? (pdf with high finish visuals x 2)

Interface – What do you touch? A list of all the buttons, sliders and interface elements with a short functionality explaination beside each item. Upload, edit, save, move, copy, add text to navi, choose colour. (PDF).
How do the user group complete those tasks (power point paper prototype)

Interaction – What do you do when you use or read the navihedron? What are the main functions of the site – what tasks are achieved. This could build upon the Interface spread. A short explanation beside each function: Create element, add element, edit, browse, search?

Motivation – What is the the use case for your Navihedron. Explain the benefits for the person who makes the Navihedron and the people who read the content. why would the user group (from your scenario) use the Navihedron?

Project Proposal

  • Description of steps required to finish the project and launch.
  • What team would be required to complete the project?
  • How would first 100 customers be acquired?
  • How much do you think it would cost to build?
  • How might the project be monetized?
  • tbd

 Reading

Jenny Preece, (Sylvian Ng, M. Campbell)

Don Norman, (K Singer, L McClay)

Gitta Salomon, (N McClenghan, P McCaliion)

Terry Winograd, (A Corbett, M Henry)

Brenda Laurel, (J Clarke, E Murray)

Edward Tufte, (N Moore, E Quinn)

Jon Kolko, (M Thorpe, M Hull)

Accurat, (Jasper J, H McClean)

Davis Neable, (C Devlin, J Greer)

Jesse Schell, (A McShane, G McGrinder)

Skeumorphism. (S Emerson, H Mallon)

Internet of Things (unassigned as yet)

Google Robotics (unassigned as yet)

Interaction Design Techniques – DES134

Approach

In this module the idea of Interaction Design is introduced. There are a number of possible approaches to this. The approach that we will pursue is one where we dive straight into the problem of building something. By building something and developing skills we will develop the tools and skills to think about Interaction Design. The idea behind this is that you need a certain amount of skill and technical ability to be meaningfully able to design and work in Interaction Design. Once some building skills are gained then we will start looking at broader design problems.

So back to 1965 via 2000

Icosahedron

In 1998 Roy Stringer promoted the idea that an icosahedron (12 vertices’s, 20 edges, 30 surfaces) could be effectively used as a navigation system to present non linear content. Each point of the icosahedron which Stringer called a Navihedron would be a subject heading. Each point can be clicked. Two things happen when a point is clicked; 1. The Navihedron animates bringing the clicked point to the frontal position, 2. content relevant to the clicked point subject heading appears in a frame or content area located adjacent to the Navihedron.

Its a very pleasing effect. The animation is engaging. The viewer can revolve the Navihedron exploring the 12 points. They can click on the point heading they are interested in. That point is the start to their story. Each point has five geometrically related points that offer the next step in the story. The viewer can create their own path through the story. It allows users to browse and gather in a natural way and yet remain within a cohesive story. In comparison linear presentations seem rather boring. The key to it may be that the reader can select their own entry point rather than the start of a linear story. Once they have selected their start they can control their own story rather than being directed through numbered pages.

When Stringer first presented the Navihedron he used Shockwave. By signing on to the site user could build their own Navihedron and edit the headings. The finished Navihedron could be exported and then used in a stand alone website.

Stringer was inspired by Ted Nelson who in 1965 first used the term “hypertext” to describe “nonsequential text, in which a reader was not constrained to read in any particular order, but could follow links and delve into the original document from a short quotation”. Nelson says that HTML is what they were trying to prevent in project XANADU. “HTML has “ever-breaking links, links going outward only, quotes you can’t follow to their origins, no version management, no rights management”.

Great ZANADU one liners: http://xanadu.com.au/ted/TN/WRITINGS/TCOMPARADIGM/tedCompOneLiners.html

Ted Nelson talking about ZANADU and Transclusion

Roy Stringer died very young in 2000. Although his work had huge impact, somehow, Stringers Navihedron Site has disappeared from the web, actually it has fallen victim to what Nelson quips as a world of “ever-breaking links”. In fact I could not find any working Navihedron. Perhaps there is something in Stringers Navihedron work that has been superseded by the all pervading paradigm of web based navigation. Menu at the top, sub menu down the side or dropping down. Top nav bar, side nav bar, drop down, floating palette has become dominant. Stringer was one of the co-founders of AMAZE. In Amaze today it is hard to find any particular reference back to any alternative navigation method other than the dominant.

websitedesign

Perhaps the finished website could look a bit like this.

Project Brief

Rebuild Stringer’s Navihedron site. That is to say build a website that allows user to edit their own Navihedra and accompany content. To do this:

1. Build Isocohedron

Build an Isocohedron in a 3D software package. Export it so that it can be manipulated in 3D on a web page. Autodesk might be able to do it: http://3d.si.edu/browser. Swift3D might also: Shockwave almost certainly does: I guess step one is to build a cube and try to export it so you can view it in a web browser

2. Labels and Animation

We will need a method to annotate each of the vertices’s with a label. Each label should be linkable to a content area. Ideally the isocohedra should be drawn and animated so that the foremost pentagon is emphasised. The vertices points behind the foremost pentagon should be faded and or smaller.

3. Edit-ability

Each Navihedron needs to be editable according to an account or folder. How can each Navihedron be made editable?

4. Content space
When the editable animated Navihedron is made we need to link it to a content display area.