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 H.LINGOR

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 H.LINGOR
 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 H.LINGOR

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 H.LINGOR
 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 H.LINGOR
 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 H.LINGOR
 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 H.LINGOR

Source: http://www.gdv.informatik.uni-frankfurt.de/lehre/ws2009/HCI/HCI_WS0910_V0.pdf
 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 H.LINGOR

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 H.LINGOR

* 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 H.LINGOR

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 H.LINGOR

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 H.LINGOR

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 H.LINGOR
 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 H.LINGOR

your partners draft.

 GRAPHICAL USER INTERFACES

POPULAR PYTHON GUI TOOLKITS

▸ TKinter

▸ PyQT

▸ Kivy

▸ wxPython
MDM TECHNOLOGICAL BASICS II WS 2018/19 H.LINGOR
 GRAPHICAL USER INTERFACES

EXAMPLE SCRIPT TKINTER

MDM TECHNOLOGICAL BASICS II WS 2018/19 H.LINGOR
 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 H.LINGOR
 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 H.LINGOR