310414 ui development 1 user interface development 310414 software engineering 310414 software...

310414310414 UI DEVELOPMENTUI DEVELOPMENT1

USER INTERFACE DEVELOPMENTUSER INTERFACE DEVELOPMENTUSER INTERFACE DEVELOPMENTUSER INTERFACE DEVELOPMENT

310414310414SOFTWARE ENGINEERINGSOFTWARE ENGINEERING

310414310414SOFTWARE ENGINEERINGSOFTWARE ENGINEERING


USER INTERFACE (UI) DEVELOPMENTUSER INTERFACE (UI) DEVELOPMENT

UI is in many ways the “packaging” of the software as it is the most visible part of the system from the users’ viewpoint

developing a UI has as much to do with the study of people as with technology issues

the UI establishes a dialog between the software and its user this dialog needs to be clear and unambiguous

during Requirements Capture we establish where the UI will be actors and use cases define the boundary

during System Analysis and System Design we specify what the UI will look like from the users’ viewpoint

UI layout, data input/output, dialog description/structure


USER INTERFACE DEVELOPMENT PROCESSUSER INTERFACE DEVELOPMENT PROCESS

UI RequirementsCapture

UI Analysis

UI Design

UI Implementation

UI Testing

(System) RequirementsCapture

System Analysis

System Design

(System) Implementation

(System) Testing


USER INTERFACE DEVELOPMENT PEOPLEUSER INTERFACE DEVELOPMENT PEOPLE

many skills and viewpoints are required to develop a UI

programmers: think in terms of programming languages and computer artifacts

UI is something added to the system to make it “user friendly”

analysts: think in terms of the user’s job UI is a representation of the forms, books, control panels, etc.

in the user’s world

human factors experts: think in terms of behavioral science UI provides users with stimulus and response mechanisms

that maximize their performance

graphics designers: think in terms of visual presentation/layout UI is a succession of screens that are like pages in a

magazine-each one designed to be attractive, to flow, and to convey information


FACTORS IMPACTING ON UI DEVELOPMENTFACTORS IMPACTING ON UI DEVELOPMENT

To help ensure a better chance of success of the new system, we need to look beyond just the technology

To help ensure a better chance of success of the new system, we need to look beyond just the technology

characteristics of the users– physiology – cognitive abilities– sensory/motor capabilities – cultural influences

characteristics of the tasks– physical objects and events – concepts, goals and plans– perceptions and actions – purpose and value of the task

characteristics of the users’ environment– the physical world – language and concepts– stimuli/affordances – society

An understanding of these factors willhelp us design better user interfaces!


Actionlanguage

UI DEVELOPMENT — MODELS & DYNAMICSUI DEVELOPMENT — MODELS & DYNAMICS

Systemmodel

PresentationlanguageMental

model

TaskmodelConceptual

model


UI DEVELOPMENT — DYNAMICS OF INTERACTIONUI DEVELOPMENT — DYNAMICS OF INTERACTION

1. The user starts with a goal to be accomplished

2. Based on the conceptual model, the user formulates a plan of action to reach the goal

3. The user translates actions in the plan into steps required to accomplish them using the computer

4. Using the action language, the user executes the steps in the plan

5. The system processes each user input, which may involve computation, accessing data, formatting output, etc.

6. After each step, feedback through the presentation language shows the result of the actions and provides guidance on what to do next


UI DEVELOPMENT — METAPHORSUI DEVELOPMENT — METAPHORS

metaphormetaphor: explaining : explaining unfamiliar conceptsunfamiliar conceptsin terms of in terms of familiar onesfamiliar ones

metaphormetaphor: explaining : explaining unfamiliar conceptsunfamiliar conceptsin terms of in terms of familiar onesfamiliar ones

The use of appropriate metaphors in the conceptual model will increase the likelihood that the user will attain a correct

mental model of the task model and the system model.

“You can see that the metaphor question is entirely separate from concepts such as graphic icons or windows. It is also much more difficult to deal with. The effort, however, will definitely be worth our while; it is this area, more than any other, that we can make the breakthroughs that will allow the ordinary user to view the computer as simple.”

Bill Gates, CEO Microsoft

e.g., desktop metaphor – the Macintosh or Windows interfaceis like a desk top in an office


UI DEVELOPMENT — METAPHORS (cont’d)UI DEVELOPMENT — METAPHORS (cont’d)

the conceptual model is the users “road map” of the system if you have a wrong road map, you will go to the wrong place!

literalism the extent to which the system’s functionality matches the metaphor

an electronic spreadsheet is like a paper spreadsheet ...

magic the extent to which the the system’s functionality extends the metaphor

automatic calculation in an electronic spreadsheet is “magic”

metaphors help us to acquire a correct road map of a system by transferring understanding from things we already know, to things we do not know (e.g., spreadsheet) good metaphor selection can significantly improve usability


UI REQUIREMENTS CAPTURE — USERSUI REQUIREMENTS CAPTURE — USERS

Know who your users will be!Know who your users will be!

not all users are the same!– different levels of expertise in problem domain– different levels of knowledge of the system– different frequency of using the system– different need to use the system

they are not all like the designer!

So what?So what?

we need to:– understand the differences– understand why the differences exist– design to deal with the differences

either exploit or minimize their effect


UI REQUIREMENTS CAPTURE — USER TASKSUI REQUIREMENTS CAPTURE — USER TASKS

Gather information on current/desired tasks that will help in (re)designing tasks for the new system

Gather information on current/desired tasks that will help in (re)designing tasks for the new system

top-down –> look at a task as a meaningful unit of worke.g., register for courses

helps in understanding task goals anddesigning overall flow of steps in the new system use cases

containthis

information!

ultimate focus should be on task goals, not task steps

identify breakdowns in current tasks

bottom-up –> look at a task as a sequence of steps/actionse.g., specify semester and year

specify primary choicesspecify alternate choices, etc.

helps in understanding user’s goals andidentifying objects (data) involved in the task


UI REQUIREMENTS CAPTURE — UI ELEMENTSUI REQUIREMENTS CAPTURE — UI ELEMENTS

Identify what data (attributes) the user will manipulateIdentify what data (attributes) the user will manipulate

Consider the actors that interact with each use case and ask:

– What information does the actor need to supply to the system?

– What information does the system need to supply to the actor?

– Which of the domain model classes are suitable as user-interface elements for the use case?

– What user-interface elements does the actor work with?

– What actions can the actor invoke, and what decisions can the actor make?

– What guidance and information does the actor need before invoking each action in the use case?


ASU Course RegistrationASU Course Registration

UI Requirements CaptureUI Requirements Capture

User Interface ElementsUser Interface ElementsRegister for coursesRegister for courses Use Case Use Case


ASU — REGISTER FOR COURSES UI ELEMENTSASU — REGISTER FOR COURSES UI ELEMENTS

to register for a course, a student actor needs to supply the following information:– semester

– year

– course code

– offering id

– indicate whether this is a primary or alternate choice


UI ANALYSIS & DESIGN — UI PRESENTATIONUI ANALYSIS & DESIGN — UI PRESENTATION

need to decide how UI elements will be represented in the user interface (e.g., text box, menu, etc.) and where they will be placed

– sketch to get a rough idea of layout and look (use sticky notes or PowerPoint)

– prototype for most important actors to get feedback

– verify navigation, consistency, compliance with standards



UI Requirements CaptureUI Requirements Capture

User Interface PresentationUser Interface PresentationRegister for coursesRegister for courses Use Case Use Case


ASU — UI PRESENTATIONASU — UI PRESENTATION

Register for CoursesRegister for Courses

Cancel RegisterDone

Year: 2002 Semester: Spring

Alternate?: Yes NoCourse offering:

Course code:

Course title:


UI ANALYSIS & DESIGN — DIALOG DESCRIPTIONUI ANALYSIS & DESIGN — DIALOG DESCRIPTION

for each task we construct a “mainline” dialog description that describes what the user normally has to do to complete the task (ignoring errors)– step-by-step description of how a user and the system interact via

the user interface to accomplish a task (scenario)

a dialog should be described from theperspective of the user, not the system

dialogs are analyzed procedurally to verify that the steps involved are efficient and accomplish the desired task use sketches, mock-ups, prototyping, etc.

Goal: Goal: seamlessness(when an object or function is needed

for a task in progress, it is “right there”)



UI Analysis and DesignUI Analysis and Design

Dialog DescriptionDialog DescriptionScenario of Scenario of Creating a Student’s ScheduleCreating a Student’s Schedule


ASU — DIALOG DESCRIPTIONASU — DIALOG DESCRIPTION

1. The system displays the Register for Courses form.2. The user selects a semester and year.3. For each primary course the user wishes to select

3.1. The user selects a primary course code.3.2. The system displays the course title.3.3. The user selects a course offering.

4. For each alternate course the user wishes to select4.1. The user selects an alternate course code.4.2. The system displays the course title.4.3. The user selects a course offering.

5. The user clicks the Done button.6. The system displays the status of the course registration

(succeeded/failed).

most of this information is found in the flow of events—analysis for a use case


UI ANALYSIS & DESIGN — DIALOG STRUCTUREUI ANALYSIS & DESIGN — DIALOG STRUCTURE

Finally, we need to put individual dialogs together into a dialog structure for the system’s user interface

– sequencing of/flow between individual tasks

– optional versus required tasks

– dialog style menus, forms, commands, function keys, etc.

– input aspects action language

– output aspects presentation language

there are many alternatives from which to choose

UI prototyping tools can help to get user feedbackand evaluate alternative dialog structures


UI ANALYSIS & DESIGN — GENERAL PRINCIPLESUI ANALYSIS & DESIGN — GENERAL PRINCIPLES

Consistency similar actions in similar

situations

Closure– organize actions so that the user

knows that a task has completed

Error handling– minimize users’ opportunity to

make errors (e.g., keystrokes)

Reversibility– actions should be reversible

Control– users should always feel in

control of the interaction

Cognitive load– the load on the user’s short term

memory should be minimized

Accuracy & completeness– the information must be as

accurate and as complete when using the system as without it

Speed– a task should not take longer to

do with the help of the system than without it

shortcuts can help

Feedback– there should be informative

feedback for every user action


SUMMARY — USER IINTERFACE DEVELOPMENTSUMMARY — USER IINTERFACE DEVELOPMENT

Organize the functionality of a system to support common user tasks.

Select appropriate dialog styles according to user and task characteristics.

Assign dialog styles consistently.

Provide alternative dialog styles for different user types.

Pay attention to usability issues!

310414 ui development 1 user interface development 310414 software engineering 310414 software...

Documents