GRAPHICAL USER INTERFACES
MODEL VIEW CONTROLLER
▸ The MVC is an architecture or design pattern to describe the three basic components of every
interactive software application, following the principle of „separation of concerns“:
- Model: the data, modelling the business logic
- View: the representation of the data
- Controller: unit interacting with the model according to the user input
View updates Model
es
se
pa
ss
es
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
es
ca
at
l
ul
ls
ip
User to
an
uses Controller
m
GRAPHICAL USER INTERFACES
The disciplines of User Experience
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
GRAPHICAL USER INTERFACES
DESIGN THINKING
Design thinking is an flexible, non hierarchical, solution-focussed process.
The 5 Stages of the design process, based on ideas of Herbert Simon *:
Define Prototype
Test
Empathize
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
Ideate
*Herbert Simon „Sciences of the Artificial (3rd Edition)“ 1996
GRAPHICAL USER INTERFACES
DESIGN THINKING
▸ The 5 Stages of the design process:
Design thinking is an iterative process
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
GRAPHICAL USER INTERFACES
DESIGN THINKING
7 factors influencing user experience (UX)
useful usable findable accessible
credible desirable valuable
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
GRAPHICAL USER INTERFACES
EXERCISE 1 - DESIGN THINKING:
▸ Think about the main difficulties you encountered during
the process of planning and prototyping your final project.
Write them down in a hierarchical order.
▸ Compare your approach with the 5 stages described in the
document „Intro to Design Thinking“ from HPI Stanford.
Where can you improve?
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
GRAPHICAL USER INTERFACES
HUMAN MACHINE INTERACTION
▸ Paradigm shift of human machine interaction
70/80 80/90 21. Century
Operator User Manager
operates uses delegates to
machine tool assistant
command line
graphical
attentive user
time
interface user interface interface
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
Source: [Link]
GRAPHICAL USER INTERFACES
HUMAN MACHINE INTERACTION
UX and UI gets more and more important because
1. Applications get more complex and intricate
2. The concurrence of other products gets higher —> attention economy
Main goal of UX: Usability, i.e. user-centered design
Criteria of usability
1. Effectiveness
2. Efficiency
Utility + Usability = Usefulness
3. Engagement
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
4. Error Tolerance
5. Ease of Learning
GRAPHICAL USER INTERFACES
PRINCIPLES OF INTERFACE DESIGN I
The computer interface expert Jef Raskin formulated two basic rules of interface
design, based on the fictional „laws of robotics“ by Isaac Asimov
▸ First Law: A computer shall not harm your work or, through inactivity, allow your
work to come to harm.
▸ Second Law: A computer shall not waste your time or require you to do more work
than is strictly necessary.*
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
* Jef Raskin „The Humane Interface: New Directions for Designing Interactive
Systems“. ISBN-13: 978-0201379372
GRAPHICAL USER INTERFACES
PRINCIPLES OF INTERFACE DESIGN II
Main interface design principles according to Larry Constantine* and Lucy Lockwood
1. Structure principle:
Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are
apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar
things and making similar things resemble one another. The structure principle is concerned with overall user interface
architecture.
2. Simplicity principle:
The design should make simple, common tasks easy, communicating clearly and simply in the user's own language, and
providing good shortcuts that are meaningfully related to longer procedures.
3. Visibility principle:
The design should make all needed options and materials for a given task visible without distracting the user with extraneous or
redundant information. Good designs don't overwhelm users with alternatives or confuse with unneeded information.
4. Feedback principle:
The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that
are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
5. Tolerance principle:
The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also
preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
6. Reuse principle:
The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than
merely arbitrary consistency, thus reducing the need for users to rethink and remember.
* Constantine „Usage-Centered Software Engineering: New Models, Methods, and Metrics.” In Purvis, M. (ed.) Software Engineering:
Education & Practice. Los Alamitos, CA: IEEE Computer Society Press, 1996.
GRAPHICAL USER INTERFACES
METHODS OF DESIGN THINKING
▸ Persona
source: Cooper „About Face“, p. 57
▸ Wireframing
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
source: UXPin „The guide to wireframing“,
p. 23
GRAPHICAL USER INTERFACES
METHODS OF DESIGN THINKING
▸ Guiding questions for Wireframing:
1. Structure – How will the pieces of this site be put together?
2. Content – What will be displayed on the site?
3. Informational hierarchy – How is this information organized and
displayed?
4. Functionality – How will this interface work?
5. Behavior – How does it interact with the user?And how does it
behave?
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
source: UXPin „The guide to wireframing“,
p. 6
GRAPHICAL USER INTERFACES
EXERCISE 2 - PERSONA:
▸ Think of two typical users who will use your application.
Make a list of typical attributes describing those users as
detailed as possible.
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
GRAPHICAL USER INTERFACES
EXERCISE 3 - WIREFRAMING:
1. Take a pen and a paper. Try to draw an interface for your
application.
2. Pair up with someone else and pitch your projects to each
other. Mutually draw wireframes for the other’s
application.
3. Analyse the differences between your own wireframe and
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
your partners draft.
GRAPHICAL USER INTERFACES
POPULAR PYTHON GUI TOOLKITS
▸ TKinter
▸ PyQT
▸ Kivy
▸ wxPython
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
GRAPHICAL USER INTERFACES
EXAMPLE SCRIPT TKINTER
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
GRAPHICAL USER INTERFACES
HOME WORK:
Adapt the script above to interact with the database from the home work from last session.
More specifically: the interface should display a list of possible avatar types and save the one
chosen by the user in the database, along with a name, that the user will be able to chose
freely. Don’t forget to associate it to the proper user.
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]
GRAPHICAL USER INTERFACES
MORE LITERATURE
▸ Donald A. Norman. The Psychology of Everyday Things. New York: Basic
Books, 1988. ISBN 0-465-06709-3
▸ Theo Mandel: Elements of User Interface Design, John Wiley & Sons,
Inc., 1997, ISBN 0-471-16267-1
▸ Ben Shneiderman, Catherine Plaisant: Designing the User Interface:
Strategies for Effective Human-Computer Interaction, 4th Edition,
AddisonWesley Pub., 2004, ISBN: 0-321-19786-0
▸ Kevin Mullet, Darrell Sano: Designing Visual Interfaces – Communication
Oriented Techniques, SunSoft Press, 1995, ISBN 0-13-303389-9
MDM TECHNOLOGICAL BASICS II WS 2018/19 [Link]