Difference between revisions of "Interface Conception & Design"

From MPDLMediaWiki
Jump to navigation Jump to search
m
Line 4: Line 4:
== Introduction ==
== Introduction ==


[[Image:prototyping_screenshot.png|right|275px|UIE-Process ]]
[[Image:prototyping_screenshot.jpg|right|275px|UIE-Process ]]





Revision as of 07:51, 19 June 2009

This is a protected page.

Introduction[edit]

UIE-Process


The UIE Team actively participates in the release process of applications, with influence on scope, design and implementation. User Interface Engineering (UIE) shapes usability, accompanying all phases from requirements to specification and productive deployment.

The approach aims at establishing a 'Usability Engineering Lifecycle'[1] for interfaces developed at the Max Planck Digital Library. The first interfaces to go through a complete life cycle is the eSciDoc publication management solution (PubMan). Interfaces for digital collections of books and images are addressed as well.

A long term goal is to balance design, (user)performance and accessibility as far as possible because interfaces need to reflect also the cultural and organizational affiliation. For web applications browser compatibility is considered as well.


Because it’s neither the developer’s, nor the organization’s interface. It’s the user’s interface.

Pattern Library[edit]

Prototyping[edit]

Before implementation starts an interface is shaped by rapid prototyping first with a prototype application. Prototyping reveals a lot of questions to be answered either by functional specification implementation design or interaction. It saves interface development from tedious and time consuming trail and error approaches.

Prototypes are very close to the application and can even be tested with users before development starts.

Introduction[edit]

All interfaces coming up for the eSciDoc project are generated as static html pages:

Example

They do not contain any valid HTML, CSS or JS. Prototypes meet the following demand:

  1. Visualization and discussion of new approaches/ideas
  2. Technical evaluation
  3. Functional evaluation
  4. Usability evaluation
  5. Documentation

Prototypes are generated with Axure RP Pro. Please mind that Axure prototype files of current Releases can not be opened in older versions.

Issues in R5

Abstract Prototype[edit]

Abstract prototypes should reflect the main motivation, intentions of a certain user/user group and reflect a rough workflow, based on the motivation. the APT should visualize the user goals and the relevant information entities needed to reach the goal. The abstract prototype should not make any suggestions on the user interface or page flow, and should be media-independent, as much as possible. Modeling an APT should help to focus on the user, his motivation/intention and his specific interests while acting. An APT is a visualization/cognitive tool to support further detailed use case specification and detailed functional prototypes.

Definition of Functional Prototype[edit]

Functional prototypes visualize all GUI elements, as precise as they appear after implementation:

  1. all necessary/important pages that appear to the user
  2. the page flow (Storyboard), where dynamic aspects can not be covered

Structure of Prototypes[edit]

The first page usually carries the name of the functional part. It shows a rough flow of important interface actions. The flow is not meant to rebuild the complete behaviour of the application. It shows:

  • What actions are triggered: orange text
  • What happens on the same page and what not: <page>
  • When and on which pages messages appear: msg

Each other parent page of the tree refers to a use case with the corresponding name. It carries the rough flow of the case to see which pages the user enters and leaves. Child pages contain graphical interfaces.

On the bottom of pages you can find a general note about the page. Yellow note stickers contain specification text.

Specification attributes of interface elements or details:

  1. Label (Axure mandatory)
  2. Interactions (Axure mandatory)
  3. Specification
  4. ALT/Title Tag
  5. eSciDoc Component/Colors

These attributes are used to provide interface development and development a clear description of how the interface should look/work.

Application Style Guide[edit]

Visual Design[edit]

Interface Conception & Design by Prototyping


  1. Deborah J. Mayhew (1999): The Usability Engineering Lifecycle. A Practitioner's Handbook for User Interface Design. Morgan Kaufmann