Scribd
Upload
8 views28 pages

SE Intro 10 - User Experience

The document discusses the significance of User Experience (UX) in software engineering, emphasizing that a system's usability directly affects user satisfaction and success. It outlines key concepts such as Human Computer Interaction (HCI), development processes for user interfaces, and the importance of prototyping and user testing. Additionally, it introduces the Model View Controller (MVC) framework and principles of user interface design, highlighting the need for consistency, feedback, and simplicity in design choices.

Uploaded by

bananafromcsp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views28 pages

SE Intro 10 - User Experience

The document discusses the significance of User Experience (UX) in software engineering, emphasizing that a system's usability directly affects user satisfaction and success. It outlines key concepts such as Human Computer Interaction (HCI), development processes for user interfaces, and the importance of prototyping and user testing. Additionally, it introduces the Model View Controller (MVC) framework and principles of user interface design, highlighting the need for consistency, feedback, and simplicity in design choices.

Uploaded by

bananafromcsp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

SOICT

School of Information and Communication Technology


IT3180 – Introduction to Software
Engineering
10 – User Experience

3
The importance of User Experience

A computer sytem is only as good as the experience it provides to its


users
• If a system is hard to use:
• Users may fail to find important results
• They may give up

• Developing good user interfaces needs skill and time

4
Terminology

User Experience (UX)


• The user experience is the total of all factors that contribute to the
usability of a computer and its systems

Human Computer Interaction (HCI)


• HCI is the academic discipline that studies how people interact with
computers

5
Development Processes for User Interfaces
It is almost impossible to specify an interactive or graphical interface in
a written document
• Requirements benefit from sketches, comparison with existing system
• Designs should include graphical elements and benefit from various
forms of prototype
• User interfaces must be tested with users.
• Expect to change the requirements and design as the result of testing
• Schedules should include user testing and time to make changes

6
Prototypes

A prototype is a preliminary version that can be used to iterate rapidly


between requirements and design
• Paper prototype
• Quick sketches
• Wireframe
• Online layout
• Mock-up
• Graphical designs to show details of layout, colors, etc.
• Operational prototype
• Include controls to test interaction and navigation

7
Paper Prototype

• Little effort has been spent


on drawing the paper
prototype
• People do not hesitate to
propose major changes
• Changes can be made at
low cost

8
Wireframe

• A wireframe shows the layout of information and controls on a display


• This wireframe is created with Balsamiq

9
Mock-up
• A mock-up shows
suggested layout and
graphical design elements,
such as icons, colors, fonts,
etc.
• This mock-up was drawn
with Photoshop

10
Mental Model and Computer Model

11
Mental Model and Computer Model (2)

• The mental model is the user’s model of what the system provides
• The computer model may be quite different from the user’s mental
model
Example: A board game, e.g., chess
• Mental model: pieces on a board
• Computer model: data and logic that describe the game

Example: The desktop metaphor, e.g., Windows and Mac OS


• Mental model: files and folders on a desktop
• Computer model: file system and metadata about the items visible on
screen
12
Mental Model vs. Computer Model

13
Mental Models and User Experience
The Model View Control

15
The Model View Controller

• The term Model View Control (MVC) is used with a wide variety of
slightly different meanings
• In this lecture, we use MVC as a computer model for designing the user
experience

• In other lectures, we may see it as:


• a system architecture (system design)
• a design pattern (program design)
• a framework for program development

16
Model: Content and Data

17
Model: Separation of Content from the View

18
Model: Separation of Content from View

19
Navigation

The controller manages the flow of the application


• Controls the navigation through the various displays that a system
provides (forms, panels, pages of a web site, etc.)

• Manages the information that is saved when leaving a display and


makes it available to other displays

• Invokes user interface functions that convey information between the


model and the user interface

Different versions of MVC have different roles for the controller


20
View: User Interface

The user interface is the appearance on the screen and the manipulation
by the user

• Graphical elements, e.g., fonts, colors, logos, icons


• Controls, e.g., mouse, touch screen, keyboard
• Input, e.g., forms, text boxes, menus, buttons

For user interface design, a team needs somebody who has skills in
graphic design

21
Principles of User Interface Design

User interface design is partly an art, but there are general principles
• Consistency – in appearance, controls, and function
• Feedback – what is the computer system doing? Why does the user
see certain results?
• Users should be able to interrupt or reverse actions
• Error handling should be simple and easy to comprehend

22
Navigation: Menus

Advantages
• Easy for users to learn and use
• Certain categories of error are avoided

Major difficulty is structure of large number of choices


• Scrolling menus
• Hierarchical
• Associated control panels
• Menus plus command line

23
Simple is good

24
Choices in User Interface Design

25
Design choices: Information Presentation

• Text
• Precise, unambiguous
• Fast to compute and transmit

• Graphics
• Simple to comprehend / learn
• Uses of color
• Variations show different cases

26
Simple is good: Command line interfaces

Problems with graphical interfaces


• Not suitable for some complex interactions
• Only suitable for human users

Command line interfaces: users interact with computer by typing


commands (e.g., Linux shell script)
• Allows complex instructions to be given to computer
• Can be adapted for people with disabilities
• Can be used for formal methods of specification and implementation
• Usually requires learning or training

27
10. Models for Requirements
(end of lecture)

28

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy