Interface Design

28
Implementing Software Solutions Interface Design

description

Year 12 Software Design

Transcript of Interface Design

Page 1: Interface Design

Implementing Software Solutions

Interface Design

Page 2: Interface Design

Brainstorm

List as many reasons why the user interface is important in the creation of software.

WHY?

Page 3: Interface Design

Some Important Reasons!

Layout and use of screen elements have a direct impact on productivity.

Page 4: Interface Design

Some Important Reasons!

In event-driven interfaces users should have more control over the sequence of operations and the input of data.

Page 5: Interface Design

Major Factors

Below are the major factors that need to be considered when creating a user interface: Identification of data required. Current popular approaches. Design of help screens. Audience identification. Consistency in approach.

Page 6: Interface Design

Identification of Data Required

Data can be of the following formats: Sound Text Graphics Animation Video

So it is up to the developer to decide what screen design elements would be most suitable.

Page 7: Interface Design

Screen design Elements

Menus Initiate execution of modules.

Command Buttons Used to allow different navigation paths. Initiate module execution.

CommandButton1

Page 8: Interface Design

Screen design Elements

Toolbars Used to quickly access commonly used

elements.

Text Boxes Used to receive user input Validation is often needed.

Page 9: Interface Design

Screen design Elements

List Boxes Force the user to select from given options. Difficult to enter incorrect values.

Combo Boxes Combine the functions of a text box with a

list.

Page 10: Interface Design

Screen design Elements

Check Boxes Used obtain a Boolean input from the user. User can make multiple selections.

Radio Buttons Force the user to select one of the displayed

options e.g. Multiple choice Answer.

Page 11: Interface Design

Screen design Elements

Scroll Bars Used to display the position of numeric data

within a given range.

Labels Used to output information and guidance to

the user.

Page 12: Interface Design

Activity 1

A) B) C) D)

E)F) G)

H)I)

Identify the appropriate screen design elements

Page 13: Interface Design

Current Popular Approaches

Previously command line interfaces such as DOS or UNIX were very popular.

However, the GUI is currently the most popular of all approaches.

The implementation of standards set out by other developers is important to minimise the learning time needed by users and make them more productive. E.g. File Menu.

Page 14: Interface Design

Activity 2

List as 5 current popular practices in software development. E.g. Splash screens.

Popular Practices

Page 15: Interface Design

Activity 3

Look at the following website.

http://www.guidebookgallery.org/index Great for your major project.

Select screen shots and outline the differences in atleast 3 interfaces open dialog box. E.g. Mac, Windows ect.

Page 16: Interface Design

Activity 4

Construct your own open dialog box. Use pencils to complete your design. Be sure to take into consideration all inputs and the current popular approach concerning GUI.

Label all screen elements.

Page 17: Interface Design

Design of Help Screens

Successful user interfaces are designed in such a way that users can quickly and intuitively learn to use a product.

Two main types of help: Help, I have a problem. Help, I nee some information.

Page 18: Interface Design

Activity 5

Identify the differences between the FOUR methods of providing help to users:

1. Context Sensitive Help

2. Procedural Help

3. Conceptual Help

4. Tutorials & Wizards

Page 19: Interface Design

Design of Help Screens

There are FOUR examples of help:

1. Context Sensitive Help Gives users specific information relating to the level

or module that they are currently operating. Usually identified by a hyperlink to a new window E.g. To save to secondary storage click on the disk

button.

Page 20: Interface Design

What Is Secondary Storage?

Secondary storage is the saving of data to a portable or transferable media. This could include CD’s, DVD’s or Floppy Disks.

Page 21: Interface Design

Design of Help Screens

There are FOUR examples of help:

2. Procedural Help Provides accurate instructions on how to complete a

task. Usually contains contents, index and search facility. E.g. To create a play list select the create play list

button………..

Page 22: Interface Design

Design of Help Screens

There are FOUR examples of help:

3. Conceptual Help This is in regards to “why” rather than “how”. The concepts behind the task are explained. E.g. FAQ….Why is it necessary to create a play list?

Page 23: Interface Design

Design of Help Screens

There are FOUR examples of help:

4. Tutorials & Wizards Give the user large amounts of information in the

operation of the program. Demonstrate or provide a framework for the user in

regards to the completion of tasks.

Page 24: Interface Design

Audience Identification

All users are designed to meet the needs of intended audiences.

The major factors to be considered include: Age Level of expertise Language Level

Page 25: Interface Design

Audience Identification

In a Nut Shell

“An interface designed for pre-school children will be different to that written for engineers.”

Page 26: Interface Design

Activity 6

List 5 different questions that an analyst could implement into a questionnaire to determine different aspects of audience identification.

Page 27: Interface Design

Consistency

This allows users to anticipate actions and placement through the use of similar structures and tools within screen interfaces.

User interfaces should be consistent across the application as well as across platforms.

Page 28: Interface Design

Activity 7Create the following interface: An interface is required to allow users to quickly

enter the following details: First Name Last Name Age Gender Birth Month Favourite Sport Nationality

Try to incorporate a variety of screen elements such as: list and combo boxes, scroll bar, text boxes, radio and check boxes.