VisiNet
Jamie Macgill
User Interface Design 1.0 Introduction The user int erface is a fundam ent al part of achieving our aim s for t his proj ect ....
User Interface Design 1.0 Introduction The user int erface is a fundam ent al part of achieving our aim s for t his proj ect . I t is t he m eans of conveying t o t he user what is happening in t he sim ulat ion and cont ribut es alm ost significant ly t o t he effect iveness of t he program as a learning aid. The aim of t his docum ent is t o show t he developm ent of t he design of t he user interface element of the program.
2.0 User Interface Brainstorming The first t hing we did in t he process of conceiving t he appearance of t he user int erface was t o m eet as a group and m ake som e basic sket ches of possible layout s. We have t he benefit of previous proj ect s being available, and so our init ial ideas were influenced by t he successful feat ures of t he previous proj ect s, along with representing the features that we wanted to include ourselves.
Our experience of designing user int erfaces and using Java’s AWT and Swing libraries is quite limited, (see “Risk Analysis” in the project’s ‘Preparation’ section) so our percept ion of what we can and can’t achieve, and whet her it can be achieved in t he t im e available is a slight ly clouded, but from reviewing som e previous projects (see “Analysis of the Problem” in the project’s ‘Analysis’ section) and using ot her Java- built applicat ions during our degree course, we know of t he main components available and how intuitive they are.
When considering t he appearance of t he user int erface, we have t o pay close at t ent ion t o t he requirem ent s of t he proj ect and ensure t hat t he user int erface will present t he best way of achieving t hese requirem ent s. The scanned im ages t hat follow are a select ion of our ( very rough) int erm ediat e sket ches t hat were produced as a result of the brainstorming session.
User Interface Design
Page 1 of 5
VisiNet
Jamie Macgill
2.1 Sketch 1
Key features: Help panel on the right hand side. Tabbed panes t o swit ch bet ween t he anim at ion and a sect ion t o edit t he network (add/remove stations etc.).
2.2 Sketch 2
Key features:
User Interface Design
Page 2 of 5
VisiNet
Jamie Macgill
Help panel on the left hand side. ‘St at us’ panel showing a t ext overview of t he current st at e of t he net work. This could include com m ent s such as “ The bus is current ly free but all t he st at ions are backing off” , or “ St at ions 1 and 6 have t ransm it t ed as t he same time so they will backoff before trying again”.
2.3 Sketch 3
Key features: Help panel is shown as a popup window when t he user clicks on a ‘help’ button. Control panel in a column on the left hand side.
User Interface Design
Page 3 of 5
VisiNet
Jamie Macgill
2.4 Sketch 4
Key features: I ndividual windows for each sect ion allow t he user t o close feat ures t hey don’t want to use. Include overview as in sketch 2. Include ‘Tips’ panel for general hints for using the program. Menu bar to access occasional use features such as load/save ad help.
3.0 User Interface design We will be using sket ch 4 as our final design because we t hink it offers t he great est scope for funct ionalit y and user cust om isat ion. We dislike having t he help sect ion perm anent ly displayed because we t hink it will becom e annoying t o t he user and also t akes up valuable space. A help it em on t he m enu bar is com m on is m ost applicat ions so we feel t his rem ains int uit ive. The st at us feat ure of some of the ideas is a useful feature, because it will complement the animation and present the information in a different way.
By having t he interface com ponent s in individual fram es, t he user can t urn on or off t hose which m ost help or hinder t heir experience of using t he program . They Can also rearrange t he fram es if t hey wish. I m plem ent ing t he syst em of individual
fram es should
JDesktopPane
and
User Interface Design
a
be
num ber
relat ively of
st raight forward
JI nt ernalFram es.
See
wit h t he
Java Java
using a API
at
Page 4 of 5
VisiNet
Jamie Macgill
http://java.sun.com/j2se/1.4.2/docs/api/ for det ails of Swing and ot her Java libraries.
Out lined below are descript ions of t he com ponent s t hat will m ake up t he user int erface, which we can refer t o during developm ent and also t o assess t he success of the final product.
3.1 General User Interface features Ref
Feature
Description
UI1
Animation
UI2
Control panel
UI3
Commentary panel
UI4
Tips panel
UI5
Help section
UI6
Loading/Saving
UI7
Quit
The anim at ion will be displayed in a window wit h a set of cont rols at t he bot t om , so t he user can see that the two are connected. The cont rols on t he panel will allow t he user t o cont rol t he visualisat ion by clicking on buttons, and adj ust ing slider cont rols. The but t ons could be m ade t o look like t hose on a video or CD player in order t o be int uit ive as well as aesthetically pleasing. This will be housed in it s own fram e, and will provide a real- time t ext ual descript ion of t he st at e of t he anim at ion. The cont ent s of t he fram e could be in HTML form at , since t his allows for easy t ext edit ing and could provide direct hyperlinks t o areas of t he help section. This will be housed in it s own fram e, and will present t he user wit h general t ips in using t he program . HTML cont ent would present t he sim plest way t o form at t he contents. This will be housed in it s own fram e, and will not be displayed init ially. The use can access it via t he m enu bar, or by clicking on hyperlinks within the commentary text. These funct ions will be accessed via t he m enu bar and should present a generic window like t hat found in ot her program s to select or name the relevant file. There will be an opt ion wit hin t he m enu bar to exit the program.
