System Development Techniques Individual Assignment

System Development Techniques

Diploma in Information Technology

Lesson 10

Learning outcomes After studying this chapter and the recommended reading, you should be able to:

• Explain user-interface design concepts • Describe the transition from analysis to user-

interface design • Discuss user and system interfaces • Explain user-interface design

Introduction

• User interface design between a system and its users is an important systems design task.

• Poorly designed interfaces with people can result in a system that operates less than optimally or doesn’t fulfil its purpose.

• Designing user interface are both analysis activities and design activities.

Introduction

• User interface during Analysis activity – discussion of inputs and outputs with stakeholders

to identify users and actors and the information they need to carry out their business processes

– screen layout and storyboard is a discovered with deep understanding of the user processes and needs.

Introduction

• User-interface design during Design activity – utilizes other analysis models as input, e.g. system

sequence diagram. – produces models in the form of sample layouts

that are used by programmers to implement the final system.

Introduction

User-interface design need to consider – the entire user experience – what devices are being used and what the users

are doing on those devices. – the type of device:

• desktop, laptop, tablet, or smartphone, – Type of OS

• iOS, Android or Windows devices.

Understanding the User Experience and the User Interface

• User Experience (UX) – a broad concept that applies to all aspects of a

person’s interaction with a product or service. – includes user

• actions, responses, perceptions, feelings • anticipation when using the software application.

Understanding the User Experience and the User Interface

• User Interface (UI) – the set of inputs and outputs that directly involve

an application user. – the part of the system that the user sees and

interacts with. – the only part of the system that the users see, to

them the user interface is the system.

Understanding the User Experience and the User Interface

• User Interface (UI) – varies widely depending on such factors as interface

purpose, user characteristics, and characteristics of a specific interface device.

– For example, • internal users

– design for operational efficiency – can be trained to use a specific interface optimized for a specific

hardware device • general customer-accessible system

– Assumes a cell phone as the input/output device. – design for general ease of use

Understanding the User Experience and the User Interface

• User Interface (UI) – must be integrated into all elements of the system

development. – should not be developed and added to the system

near the end of the development process.

Understanding the User Experience and the User Interface

• User-centered design – Three important principles:

• Focus early and throughout the project on the users and their work.

• Evaluate all designs to ensure usability. • Use iterative development.

Understanding the User Experience and the User Interface

• Usability – how easy a system is to learn and use. – ensuring usability isn’t easy; there are many different

types of users with different preferences and skills. – If the system has a variety of end users, how can the

designer be sure that the interface will work well for all of them? • if it is too flexible, some end users might feel lost. • if the interface is too rigid, some users will be frustrated.

Understanding the User Experience and the User Interface

• Usability – ease of learning and ease of use are in conflict.

• Easy to learn – menu-based applications with multiple forms, many dialog boxes,

and extensive prompts and instructions are easy to learn and self- explanatory.

– appropriate for systems that end users use infrequently. • Easy to use

– internal users use the system all day, – important to make the interface fast and flexible, with shortcuts, hot

keys, voice commands, and information-intensive screens. – might be harder to learn, but it will be easier to use after it is

learned.

Understanding the User Experience and the User Interface

• Metaphors – items that appear on the screens are virtual

entities. – Items exist only as images and sounds. – Therefore, helpful for Human-Computer Interface

(HCI) developers to use metaphors based on real- world physical entities and actions to design a user interface with a positive user experience.

Understanding the User Experience and the User Interface

• Metaphors – make computers easier to use and learn, – analogies between features of the user interface

and aspects of physical reality that users are familiar with.

– widely applied to user-interface design (see next table)

Understanding the User Experience and the User Interface

• Metaphors

Fundamental Principles of User- Interface Design

• Human-interface objects (HIOs) – objects that appear on a screen the user can

manipulate. – e.g. documents, buttons, menus, folders, and

icons.

Fundamental Principles of User- Interface Design

• Human-interface objects (HIOs) – Use HIOs That Reflect Their Purpose or Behaviour

(Affordance) • Mostly used in buttons or other small icons • Affordance: the appearance of a specific

control suggests its function – For example, a control that looks like a steering

wheel suggests that it is used for turning. – can also be achieved by a user-interface control that

the user is familiar with in another context. » For example, the media player control icons shown in

most music player.

Fundamental Principles of User- Interface Design

• Human-interface objects (HIOs) – HIOs Should Provide Visual Feedback When

Activated • visual or audio response by the system in response to

some user action • immediate feedback on mouseover or mouse click. • Feedback provides the user with a sense of

confirmation and the feeling that a system is responsive and functioning correctly.

• Lack of feedback leaves the user wondering whether a command or input was recognized or whether the system is malfunctioning.

Fundamental Principles of User- Interface Design

• Human-interface objects (HIOs) – HIOs Should Provide Visual Feedback When

Activated • visual or audio response by the system in response to

some user action • immediate feedback on mouseover or mouse click. • Feedback provides the user with a sense of

confirmation and the feeling that a system is responsive and functioning correctly.

• Lack of feedback leaves the user wondering whether a command or input was recognized or whether the system is malfunctioning.

Fundamental Principles of User- Interface Design

• Consistency – effectiveness of the user experience is highly

dependent on consistency. – different levels or areas where consistency should

be maintained. • Consistency Within and Across Platforms • Consistency Within a Suite of Applications • Consistency Within an Application

Fundamental Principles of User- Interface Design

• Consistency Versus Continuity – changes occurring in new releases of an application. – maintains a certain level of consistency over time across

multiple releases. – problem designers have is understanding how to add new

functionality while maintaining continuity across new releases. • may not be possible to maintain complete consistency while

adding new functions, • but continuity should be maintained so that users can easily

transition into the new release.

Fundamental Principles of User- Interface Design

• Discoverability – feature of the user interface that provides clues to

help the users uncover hidden features. – Two ways:

• Use Active Discovery to Help Find Hidden Features • Use Visual Diagrams to Help Users Discover Functions

or Tools

Fundamental Principles of User- Interface Design

• Discoverability – Use Active Discovery to Help Find Hidden Features – Active discovery

• is a user-interface feature that leads users into discovering hidden features. – have a pop-up window appear at application initiation that

provides hints and additional features. – have a small text box appear as the user hovers over different

locations of the screen.

Fundamental Principles of User- Interface Design

• Discoverability – Use Visual Diagrams to Help Users Discover

Functions or Tools – a simple diagram that is very expressive of how to

perform a desired action.

Fundamental Principles of User- Interface Design

• Closure – based on the dialogue metaphor – a use case requires several steps to complete.

• the user interface should have a clearly defined beginning and ending.

– Provide feedback on the HIOs (e.g. button, icons)

Fundamental Principles of User- Interface Design

• Closure – For a single step

• have a message pop up saying that the work was saved or the action was completed.

– When a use case requires several steps, • important that the user know that all the steps are

completed. • have a Continue button and a Finish button that

indicate the end of the process. • can include progress bar is also included and a final

message to indicate that the dialogue has successfully finished.

Fundamental Principles of User- Interface Design

• Readability and Navigation – Text Should Be Readable (Font Type, Size, and

Colour) – Navigation Should Be Clear – Always Allow a Way Out

• When the user is entering data, should be able to immediately escape from that form or page without changing the system.

• input forms have a Cancel button to immediately back out of the specific form.

Fundamental Principles of User- Interface Design

• Readability and Navigation – can be difficult to support in multiple devices. – large desktop screens usually are quite readable, – readability with small mobile devices is often a serious

problem. – large desktop screens also have a lot of space for clues

about navigating through various screens of an application. – small screens on mobile devices often require that the

navigation tools be hidden or partially hidden.

Fundamental Principles of User- Interface Design

• Usability and Efficiency – the entire user experience must be considered to

make an application effective and usable. • Provide Shortcut Keys to Support Experienced Users • Design Error Messages That Provide Solution Options • Design for Simplicity

Transitioning from Analysis to User- Interface Design

• User-interface design built from – use case descriptions

• Grouping of related use cases to identify main menu items.

• starting point for a dialogue or form – activity diagrams – system sequence diagrams.

Transitioning from Analysis to User- Interface Design

• Use Cases and the Menu Hierarchy – Menus • provide the mechanisms first to organize use

cases and to invoke a particular use case or user dialogue. • needed to present the user with a number of

choices per screen, • to group related functions together so users

can more easily locate them.

Transitioning from Analysis to User- Interface Design

• Use Cases and the Menu Hierarchy – How many main menu items? • by the number of uses cases or menu choices,

and by the limits of human cognition. • For a typical business system, dividing the total

number of interactive use cases by five provides an initial estimate of the number of menus needed • allows for additional menu items, such as

setting options or preferences.

Transitioning from Analysis to User- Interface Design

• Use Cases and the Menu Hierarchy – How to group use cases into one menu item • Use cases with common actors and Event

decomposition • Use cases that implement CRUD actions for a

specific domain class

Transitioning from Analysis to User- Interface Design

• Use Cases and the Menu Hierarchy – How to group use cases into one menu item

• For example, an initial grouping of these cases by actor and subsystem is a good starting point for menu design.

Transitioning from Analysis to User- Interface Design

• Use Cases and the Menu Hierarchy – How to group use cases into one menu item

• use cases grouped into first-cut menus by similar function and user

Transitioning from Analysis to User- Interface Design

Transitioning from Analysis to User- Interface Design

• Use Cases and the Menu Hierarchy – Each menu collects uses cases from one

subsystem for a customer or internal sales representative.

– The number of menu choices ranges from four to seven,

• won’t overload any one menu • may enable multiple menu levels to be displayed at one

time.

Transitioning from Analysis to User- Interface Design

• Use Cases and the Menu Hierarchy – A dialogue design is created for each menu

option. – You should note that designers often discover

missing or incomplete use cases during user- interface design, which results in a brief return to analysis activities to complete the documentation.

– (One of the reason we need to start GUI design early)

Transitioning from Analysis to User- Interface Design

• Use Cases and the Menu Hierarchy – Menus • include options that are not activities or use

cases from the event list. • Many of these options are related to the

system controls, such as account maintenance or database backup and recovery • Other added items include help links as well as

links to other menus or subsystems.

Transitioning from Analysis to User- Interface Design

• Analysis Models and Input Forms – A system sequence diagram • identified individual messages coming from the

external actor into the system. • The messages represent forms or input screens

to pass information into and out of the system. • a good starting point to identify the various

screens and forms that may be needed for the user interface for a particular use case.

Transitioning from Analysis to User- Interface Design

• Analysis Models and Input Forms

Transitioning from Analysis to User- Interface Design

• Analysis Models and Input Forms – This figure shows six separate data flows across

the system boundary. – Part of the user-interface design process is to

decide how to design the screens for these six data flows.

– One pair (in and out) data flow can be on the same screen

Transitioning from Analysis to User- Interface Design

• Dialogues and Storyboards – After identifying all required dialogues, the

designer list the key steps how the dialogues works together.

– Include a description of what the user and computer do at each step.

– The format for writing these steps can mimic the activity diagram.

User-Interface Design

• Need to consider design for different type of devices: – Desktop and Laptop User Interfaces – Web-Based Applications – Tablets

Summary

• User interface design between a system and its users is an important systems design task.

• Designing user interface are both analysis activities and design activities.

• Three important principles for User-centered design • Focus early and throughout the project on the

users and their work. • Evaluate all designs to ensure usability. • Use iterative development.

Summary

• The fundamental Principles of User-Interface Design includes: – Affordance – Consistency – Consistency Versus Continuity – Discoverability – Closure – Readability and Navigation – Usability and Efficiency

Summary

• User-interface design built from – use case descriptions – activity diagrams – system sequence diagrams.

• Storyboards are constructed using the designed dialogues

Read

Textbook:

• Satzinger, Robert & Stephen Chapter 8