Lecture 5: Interface Design Review

What is an interface?

  • A common boundary.
  • Between things.
  • A point of interaction. Not interaction itself. The interactive experience depends on an interface but is a whole ecology in itself. Interface is within interaction.
  • Medium across which data passes.

Interactivity has been one of the key value added characteristics of new media where old media offered passive consumption, new media offered interactivity. 

Interactivity: Ideologically and Historically

Old Media = Passive Consumption

  • For example, like watching television. You sit there and consume. One producer to many viewers, one to many.

New Media = Interactivity

  • Interactivity and new media being more aligned with many users collaborating with each other, or many to many as opposed to one to many. Web 2.0, social media and sharing have brought the idea of new media forward. Generally the term stands for a more powerful sense of user engagement with media text, a more independent relation to sources of knowledge.

Contemporary Interactivity: Interface Design Within Four Prominent Threads:

– Hypertextual Navigation

  • The user must use the computer and software to make reading choices in the database (Can be anything from the entire world wide web to a particular learning package, an adventure game or the hard drive on your pc.) The end result of such interactions will be that the user constructs for him or herself an individualised text made up from all the segments of text which they call up through their navigation process.

– Immersive Navigation

  • Hypertext = Extractive
  • Representations of space = Immersive
  • Immersive Media = Hypertext + Represented Space (E.g. Virtual reality, simulations and games)
  • (Hypertextual Navigation is extractive so we go and extract it as an outsider. However when we move from seeking to gain access to data and information, to navigating representations of space or simulated 3D worlds we move into this idea of immersive interaction, we are essentially immersed in or embodied by the interface.)

– Registrational Interactivity

  • To ‘write back into’ collective information
  • Examples: Updating Facebook, leaving comments on blogs, re-tweets, video responses and wikis, etc. This interactivity depends on other users in a collaboration and a system to freely allow collaboration via the user being able to write back into the interactive experience. A concern with Registrational interactivity is that the user forgoes control of information once it is entered into a system.

– Interactive Communications

  • Based on face to face human communication so we draw parallels or compare and contrasts from that standard or person to person connection. For example: A forum post would be considered less interactive than a live chat site. It’s the continuation of face to face storytelling, basically in a digital context.

Fundamentals of Screen Based Interactive Design Production

Visual-spatial thinking/Gestalt psychology:

  • “Visual thinking comes from the field of Gestalt psychology, which argues that humans respond, organise and assign meaning to elements in their visual field. This approach considers how users conceptualise functional wholes from the individual elements they perceive in the visual field”

Using Fundamentals or Principles:

  • Principles serve as broad guides
  • Draw on design theory
  • Emerge from print or poster design guidelines
  • User perception

6 Fundamentals/Principles:

1. Visual Focus

  • Use improved figure-ground contrast to signal which elements users should focus on.
  • Use animation and rollovers in navigation toolbars to indicate functional or clickable items.
  • Give contextual and visual cues greater visual distinction.
  • Develop style sheets that specify similar formats for level headings and spacing between text chunks.

2. Problem Solving

  • Highlight potential pathways to readers by using breadcrumb trails, site maps, indices and headers.
  • Develop navigation toolbars that suggest information pathways to users, which don’t just outline content.
  • Provide multiple navigation tools and choices for readers such as toolbars, search fields, drop-down lists, site maps etc.
  • Consider time in your design. Don’t make things take too long and provide alternative options like ‘skip’ buttons to allow the user to move past animations and solve their problems quicker if they want to.

3. Contextual

  • Place more contextual information, such as visuals cues, in higher site levels.
  • Provide detailed content in lower site levels.
  • Use shaded regions, tables, frames or other methods to anchor navigation tools in consistent locations.
  • Place content no more than 5 to 7 links or clicks from users, so content is not placed too far from users.

4. Conceptual

  • Use familiar icons, shapes and graphics that rely on prior user knowledge.
  • Place graphics in familiar contexts.
  • Provide text tags for images used in new contexts.
  • Use design metaphors to help users comprehend the arrangement and content of visual spaces.

5. Wholeness

  • Group related content using visual shapes, such as shaped boxes or rules, or by using space.
  • Use figure-ground contrast and grouping to help users identify relationships between elements.
  • Use breadcrumbs, site maps, indices, etc. to help users identify the sites structure (and filter information.)

6. Linear/Nonlinear

  • Linear Approach: Pages are only available in a straight line. For example, you can’t get to the last page from the first. The user is forced to go through the middle page to get to the end and back around to the start again. Essentially the user becomes trapped, and it is at this point in traditional web browser scenarios that the user goes for the browsers back button, or leaves the site frustrated and never to return.
  • Nonlinear Approach: Allows all pages to be accessible from every page.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s