Advance System Analysis

User-Interface Development

1
Today Outline
 Essential User-Interface Prototyping
 Traditional User-Interface Prototyping
 User-Interface Design Strategies

2
The process of building UI

3
Essential User-Interface
Prototyping
 An essential UI prototype is a low-fidelity model, or
prototype, of the UI for your system , It represents the
general ideas behind the UI, but not the exact details
 An essential UI prototype is effectively the initial state
—the beginning point—of the UI prototype for your
system. It models UI requirements, requirements
evolved through analysis and design to result in the
final user interface for your system.
 The goal of Essential User- Interface , with essential UI
modeling the goal is to focus on your users and their
usage of the system, not system features.

4
 When a team is creating an essential UI
prototype, it iterates between the following
tasks:
1. Explore system usage
2. Model major UI elements
3. Model minor UI elements

5
Exercises
 So how do you use sticky notes and flip chart
paper to create an essential UI prototype ?
 what a seminar enrollment submission would
contain?

6
Example of low-fidelity

7
8
Traditional User-Interface
Prototyping – Medium-fidelity
 While you are determining the needs of your
stakeholders you may decide to transform
your essential UI prototypes, if you created
them to begin with, with sketches

9
Screen sketch for enrolling in a
seminar

10
High-fidelity
 Once you understand the UI needs of your
stakeholders, the next step is to actually build
a prototype. Using a prototyping tool or high-
level language, you develop the screens,
pages, and reports needed by your users
 such as the HTML page depicted

11
High-fidelity

12
User-Interface Design Strategies
 As you develop the user interface of your system
you should be aware of basic UI design issues:
 The structure principle:
 Your design should organize the UI purposefully
 in meaningful and useful ways based on clear
 putting related things together and separating unrelated
things
 The simplicity principle
 Your design should make simple
 providing good shortcuts that are meaningfully related to
longer procedures
 The visibility principle
 Your design should keep all needed options and materials
for a given task visible without distracting the user with
extraneous or redundant information

13
 The feedback principle
 Your design should keep users informed of actions or
interpretations
 changes of state or condition, and errors or exceptions
relevant and of interest to the user through clear, concise,
and unambiguous language familiar to users.
 The tolerance principle
 reducing the cost of mistakes and misuse by allowing
undoing and redoing
 while also preventing errors wherever possible by tolerating
varied inputs and sequences and by interpreting all
reasonable actions as reasonable
 The reuse principle
 Your design should reuse internal and external components
and behaviors, maintaining consistency with purpose

14