week08_UCD_MVC.pdf
COMP 2511
Object Oriented Design &
Programming
1
What is User Centred Design ?
2
Specify the context of use: Identify
the people who will use the product
(Persona), what they will use it for,
and under what conditions they will
use it. (Scenario)
Specify requirements : Identify any
business requirements or user goals
that must be met for the product to
be successful. (Use-Cases)
Create design solutions: This part of
the process may be done in stages,
building from a rough concept to a
complete design.
Evaluate designs: Evaluation – ideally
through usability testing with actual
users – is as integral as quality testing
is to good software development.
User Centred Design
• Agile Development philosophy provides value to
customers, but in order for our software to be truly
successful in the eyes of its biggest critics, we must adopt
a more user-centered approach.
• UCD can be applied to the design of anything that has a
user—from mobile phones to kitchens.
• The era of feature-centric development is coming to an
end. Consumers are beginning to realize that more
features do not always mean a better product. Quality of
experience is far more likely to be a product differentiator
than product features
• UCD provides a way to engineer these quality experiences.
3
Jakob’s Ten
Usability Heuristics
www.nngroup.com/articles/ten-usability-heuristics/
Designs should keep users informed
about what is going on, through
appropriate, timely feedback.
Visibility of
System Status1
The design should speak the users’
language. Use words, phrases, and
concepts familiar to the user, rather
than internal jargon.
Match between
System and
the Real World
2
Users o!en perform actions by
mistake. They need a clearly marked
“emergency exit” to leave the
unwanted action.
User Control
and Freedom3
Users should not have to wonder
whether di”erent words, situations,
or actions mean the same thing.
Follow platform conventions.
Consistency
and Standards4
Good error messages are
important, but the best designs
carefully prevent problems from
occurring in the #rst place.
Error
Prevention5
Minimize the user’s memory load
by making elements, actions, and
options visible. Avoid making users
remember information.
Recognition
Rather Than Recall6
Shortcuts — hidden from novice users
— may speed up the interaction for
the expert user.
Flexibility and
E$ciency of Use7
Interfaces should not contain
information which is irrelevant. Every
extra unit of information in an
interface competes with the relevant
units of information.
Aesthetic and
Minimalist
Design
8
It’s best if the design doesn’t need any
additional explanation. However, it
may be necessary to provide
documentation to help users complete
their tasks.
Help and
Documentation10
Error messages should be expressed
in plain language (no error codes),
precisely indicate the problem, and
constructively suggest a solution.
Recognize,
Diagnose, and
Recover from Errors
9
Nielsen Norman Group
Interactive mall maps have
to show people where they
currently are, to help them
understand where to go next.
Users can quickly understand
which stovetop control maps
to each heating element.
Just like physical spaces,
digital spaces need quick
“emergency” exits too.
Check-in counters are usually
located at the front of hotels,
which meets expectations.
Guard rails on curvy mountain
roads prevent drivers from
falling o! cli!s.
Regular routes are listed on
maps, but locals with more
knowledge of the area can
take shortcuts.
People are likely to correctly
answer “Is Lisbon the capital
of Portugal?”.
A minimalist three-legged
stool is still a place to sit.
Wrong-way signs on the
road remind drivers that
they are heading in the
wrong direction.
Information kiosks at airports
are easily recognizable and
solve customers’ problems in
context and immediately.
!
EXIT
WRONG
WAY
CHECK IN
i
JavaFX and MVC
Architecture
5
Separation of Concerns Using MVC
Architecture
6
Image http://lkubaski.wordpress.com/2012/12/20/java-se-application-design-with-mvc-with-images/
• The presentation layer that provides the interaction that the
user sees (e.g. a web page).
• View component takes inputs from the user and sends actions
to the controller for manipulating data.
• View is responsible for displaying the results obtained by the
controller from the model component in a way that user wants
them to see or a pre-determined format (e.g., HTML, XML)
• View can query the model for updates
• It is responsibility of the controller to choose a view to display
data to the user.
14
26
3114
26
31
versus
Model: array of numbers [ 14, 26, 31 ]
è Different Views for the same Model:
View
₋ Holds all the data, state
₋ Responds to instructions to change of state (from the
controller)
₋ Responds to requests for information about its state
( usually from the view ),
₋ Sends notifications of state changes to “observer”
(view) ( this “push” behaviour may not always
happen )
₋ The model does NOT depend on the controller or the
view
Model (Data)
₋ Glue between user and processing (Model) and
formatting (View) logic
₋ Accepts the user request or inputs to the
application, parses them and decides which type of
Model or View should be invoked
₋ Provides model data to the view
Controller
₋ MVC inserts a controller class between the view and
model and decouples the two tiers, thereby making
the model and view components reusable without
modification
₋ Java FX Lecture demo..
Benefits of MVC
Ashesh Mahidadia