Interface Conception & Design

APPLICATION AREAS
Home Interface Conception & Design User Interface Evaluation Interface Development
PROJECTS
Pattern Library Publication Management Digitization Lifecycle Research- and Metadata Handling Usability Report Corporate & Interface Design (under Rework) Page Index
edit

From early drafts to productive use, each interface is designed and visualized using interface prototypes to provide an outlook on the solution at an early point in time. Short iteration cycles enable usability evaluation right from the beginning. Optimized information architecture and navigation can be designed in close cooperation with users, making usability more predictable.

Introduction

An implemented interface is based on a process that starts with rough ideas drawings varieties and discussions. The more approaches are available right at the beginning of conception the more quality and innovation can be expected for the forthcoming interface solution. Quality is gained through iteration cycles with users. At this point in time the process is an evolutionary one. While development is not affected good and bad can be separated using sketches, paper prototypes or even high fidelity prototypes. The more promising an approach is considered the more detailed it will be shaped.

In the end each major interaction is considered and can be visualized for interface development. Creating and reducing variety step by step is a task which mustn't affect development because it needs precise direction to implement.

Pattern Library

Within the institutes of the Max Planck Society there are many different needs for new or improved software solutions. It is almost impossible to build individual GUIs on top of them.

Interfaces developed by UIE use basic patterns, based upon a style guide for web applications. As far as possible, new services are built on reusable components, so that new interface elements will be implemented along with proven ones. Every component has a defined pattern, CSS definitions and (JavaScript) behaviour and is documented in detail.

Establishment of an Architecture (See Picture from Bottom to Top)

1. Structure: Starting with abstract representation of an pattern
2. Visual Design: Styleguide definition for the pattern
3. Development: Definition of reference-HTML snippets
4. JSPF side: Integration of snippets

Introduction of a Pattern Taxonomy

1. Organizing Layout and Display
2. Navigating Functionality
3. Display Data
4. Navigating Data
5. User Input

Application Style Guide

Visual design guidelines are a crucial aspect for interface design. It can provide user experience, identification and acceptance. Colors, fonts, positions and dimensions on the one hand reflect cultural and organizational identity. On the other hand they need to serve the interface's limitations of screen display.

In effect properties are not chosen by personal likes but to provide orientation, separate important from details and leverage the visual communication. At this point in time dynamic aspects are proposed and discussed as well.

Interface Concepts

Interface concepts are done during requirements phase and specification phase. They deal with dynamc aspects of the interface, because they can't be visualized in a sufficient manner by prototyping.

Interface Drafts

A first approach or suggestion for a new GUI. This is done by prototyping and available as screenshot with comments and explanations.

Prototyping

Before implementation starts an interface is shaped by prototyping first with a prototype application called Axure. 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.

All interfaces coming up 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.

Abstract Prototype (optional)

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

Functional prototypes visualize all GUI elements, as precise as possible. Dynamic aspects of roles and dependencies are not covered:

1. Necessary/important pages that appear to the user
2. Page flow (optional), where dynamic aspects can not be covered

Structure of Prototypes

The first page carries the name of the functional part. It shows a rough flow of important interface actions. On the bottom of pages you can find a general note about the page. Yellow note stickers contain specification text.

Expert Interviews

Expert interviews are conducted to get a better understanding of one specific working process and how it can be organized/reorganized within the interface. A very domain specific knowledge is needed to understand interface requirements better. Functional aspects come additionally and can not be separated from interface needs.

Requirements of Expert Interviews

Participants	1
Supervisor	1 - 2
Equipment	PC Internet connection Interview agenda (provided by UIE) Audio recording device (provided by UIE)
Duration	2h - 4h
Results	Document with protocol of interview. Prototype draft.
Steps	Introduction Q & A (Questions and Answers) Summary

• Summary of the expert interviews

Surveys

To get a better picture of how users approach web application's interfaces surveys are done. They could give answers where metrics do not:

Summary of 1st survey September 2011 (MPDL internal dry run)

References

User Interface Engineering

Cascading Style Sheets

Hypertext Markup Language

Java Simple Plugin Framework

Graphical User Interface