Interface Design - an overview on recent findings in HCI research and examples of interfaces created by WebFoo Interface Division. This slideshow was presented by our Creative Director, Mihai Varga, at a guest lecture at Surrey University in March 2014.

1. Mihai Varga, PhD, MA
Senior Designer
Interface Division - WebFoo London
www.interface-design.co.uk
INTERFACE DESIGN
Guest Lecture
School of Hospitality and Tourism Management
University of Surrey
11/03/2014

2. www.interface-design.co.uk
Follow @WebfooInterface

3. Summary
1. Introduction and main terminology.
1. The interdisciplinary nature of contemporary design of HCI.
1. A philosophical and theoretical framework for contemporary Interaction
design.
1. Relevant knowledge for practice.
1. The value of superior user interface design to a business.
1. The process of interface design with the role of different actors.
2. What makes an interface effective? Guidelines for optimal design.
1. Design approach in everyday life.

4. 1. Introduction and main terminology

5. 1. Introduction and main terminology
• It is about developing interactive products that are easy, effective, and pleasurable to
use. (Rogers, Sharp, Preece, 2011)
• One main aim of the Design field is to reduce the negative aspects (e.g. frustration,
annoyance) of the user experience while enhancing the positive ones (e.g. enjoyment,
engagement).
• Constructive Design that is capable of analysis and reproduction can influence and
enhance the taste and lifestyle of a society. (Muller-Brockman, 1961)

6. 1. Introduction and main terminology
Müller-Brockmann’s Manifest:
• “the will to systematize, to clarify;
• the will to penetrate to the essentials, to concentrate;
• the will to cultivate objectivity instead of subjectivity;
• the will to rationalize the creative and technical production processes;
• the will to integrate elements of colour, form and material;
• the will to achieve architectural dominion over surface and space;
• the will to adopt a positive, forward-looking attitude;
• the recognition of the importance of education and the effect of work devised in a
constructive and creative spirit.”
(Müller-Brockmann, p.10,
1961)

7. Interaction
Design
Interface
Design
User Experience
Design
-defines the structure and
behaviors of interactive products
and services, and user
interactions with those products
and services.
(Interaction Design Association - IxDA, 2011)
-defines how the system will
interact with humans
1. Introduction and main terminology
-studies and evaluates how users
feel about a system
These branches of design relate to each other, and often they almost overlap.

8. 1. Introduction and main terminology
(Adapted from Moore, 2009)

9. 2. The interdisciplinary nature
of contemporary design of HCI

10. 2. The interdisciplinary nature of contemporary design of HCI
• There is a variety of disciplinary knowledge and skills involved in contemporary design of
human-computer interactions.
• HCI now addresses information technology, psychology, design, communication studies,
cognitive science, information science, science and technology studies, geographical
sciences, management information systems, industrial, manufacturing, systems
engineering and so on.
• Designing often necessitates considering the aesthetic, functional, economic and
sociopolitical dimensions of both the design object and design process. It may involve
considerable research, thought, modeling, interactive adjustment, and re-design.
(Brinkkemper, 1996)

11. 2. The interdisciplinary nature of contemporary design of HCI

12. 2. The interdisciplinary nature of contemporary design of HCI
Example #1
• To build the new app, we have integrated research from several domains:
• From Neuroscience we adopted principles for efficient and flexible networks.
• From Psychology we used insights to build in functionality to motivate users.
• Organizational science helped us find ways to structure development experiences in
meaningful ways.
• Business literature helped us understand mentorship relationships.
• Extropian philosophy gave us inspiration for which values to base the interaction on, when
faced with design tradeoffs.
• An understanding of business models and venture finance gave us an outlook on the features
needed to scale the business and to make it viable.

13. 3. A philosophical and theoretical framework
for contemporary Interaction design.

14. 3. A philosophical and theoretical framework for contemporary Interaction design.
What shapes design?
• Philosophy of design is the study of assumptions, foundations, and implications of
design. The field is defined by an interest in a set of problems, or an interest in central or
foundational concerns in design.
• There are many studies within the field of Human-Computer Interaction, but few have
asked "philosophical" questions about the very nature of interactivity and the interactive
user experience.
• Developing a satisfactory understanding of the nature and workings of design itself calls
for serious philosophical work. (Galle, 2000)

15. 3. A philosophical and theoretical framework for contemporary Interaction design.
Some philosophical questions:
• What distinguishes design (architectural, engineering, software, etc.) from other
intellectual endeavours, such as science or technology?
• How are the concepts of design and artefacts related?
• What ontological and epistemological assumptions should be made to explain the
apparent fact that designers can know or predict the properties of an artefact, which is
not there to have properties?
• Can results from the philosophy of design be put to use in design practice – for example,
by leading us towards better artefacts, better design methods, better ways of utilizing
computers in design?
(Galle, 2007)

16. 3. A philosophical and theoretical framework for contemporary Interaction design.
The Constructivist approach
• A prominent paradigm in the design field.
• It assumes the locus of knowledge construction to be
in the individual learner; the social or situative variants
assume this locus to be in socially organised networks.
It is the learner who creates meaning, affected by and reflecting his socio-cultural
environment.
(Birenbaum, 2003)
• It is a unity of theory and practice, where experience plays a crucial role.
(Dewey 1938)
• Design programmes based on constructivism use the making skills of the designer as
well as his analytical skills to gain knowledge. (Hummels & Vinke, 2009)

17. 3. A philosophical and theoretical framework for contemporary Interaction design.
The Media and Art approach
• To be able to fully utilize the potential of interactive
media, it is important to have a deep understanding
of the medium itself.
• Students of design should develop a deep knowledge of their media and materials
through explorations of their properties – Bauhaus School of Design
• Critique: sometimes ignores the user’s limits and proposes theories that lack predictibility.
Some of the rules emerged from this approach did not have any theoretical or empirical
basis, they were just artistic statements made by some elite designers.

18. 3. A philosophical and theoretical framework for contemporary Interaction design.
Cognitivism - Interaction as information processing
• Interaction is modelled as information flowing from the artefact (stimuli) to the user, where
it is processed by the user's "cognitive processor", leading to actions like pushing a
button.
(Card et al, 1983)
• Cognitive models have been successful in predicting key-level human behaviour for
routine tasks, but have shown little explanatory and predictive power when it comes to
more open tasks (like updating your Facebook profile lol).
• Critique: information-processing model reduces the user to a mechanical symbol-
processing machine, leaving out important aspects of what defines us as humans.
(Winograd & Flores 1986)

19. 3. A philosophical and theoretical framework for contemporary Interaction design.
(Adapted from Card et al, 1983 )

20. Come, my sweet paradigm.
Let's shift into something more comfortable.

21. 3. A philosophical and theoretical framework for contemporary Interaction design.
Pragmatism
• Pragmatism teaches us to think of the practical
consequences that follow from acceptance of a belief.
At the core of pragmatist thought is the view that our
theories must be linked to experience or practice.
• Pragmatism provides a base for a mutual relation between science and practice that is
unprecedented. The pragmatist approach provides the foundation for understanding and
exploring the role of the aesthetic dimension in the broader context of scientific inquiry.
• It emphasizes interaction and integration, rejecting Cartesian radical doubt and dualist
worldviews. Continuity becomes the guiding principle, emphasizing process and
experimentation. (Rylander, 2012)

22. 3. A philosophical and theoretical framework for contemporary Interaction design.
Implications of Pragmatism in design
• Creates productive tensions between creativity and rationale, allowing a blend between
science and design.
• Design can be systematically evaluated and maintained, yet at the same time provoke
new experiences and insights. There is a commitment to continually experimenting
and testing ideas. (Rylander, 2012)
• Pragmatic aesthetics are gaining momentum nowadays with designers moving towards
the digital, and the HCI community moving towards experience.
Djajadiningrat et al (2007); Forlizzi & Battarbee (2004); Overbeeke et al (2002); Petersen et al (2004); Hummels & Overbeeke (2010)

23. If you're not bored by now,
you're not paying attention.

24. 4. Relevant knowledge for practice.

25. 4. Relevant knowledge for practice.
Sources of knowledge in Design
• Design should be based on a structured and systematic approach to gaining knowledge.
• The Evidence based approach
• Scientific data collection - the process of gathering and measuring information on
variables of interest, in an established systematic fashion that enables us to answer
stated research questions, to test hypotheses, and to evaluate outcomes (valid and
reliable measures, data analysis).
• Statistics relevant for a certain aspect of design (caution!).
• Meta-analysis or theoretical reviews of current research regarding the challenges
that need to be addressed in the design process.
• Exploration of the properties of the media and materials used for Design.
• Guidelines gathered from previous design studies (caution!)
SCIENCE
DESIGN
PRAXIS

26. 4. Relevant knowledge for practice.
Examples of knowledge gathered from scientific research:
• Aesthetics have an influence on trust and credibility (Karvonen et al, 2000; Robins & Holmes, 2007),
perception of usability (Ben-Bassat et al., 2006; Turingand Mahlke, 2007; Tractinsky et al., 2000), usability testing
(Sonderegger and Sauer, 2010) and overall impression (Schenkman and Jonsson, 2000; Tractinskyet al., 2000; Tuch et al.,
2010).
• Arousal is linked to variables such as complexity, novelty, prototipicality and ambiguity.
(Tuch et al., 2012)
• Improving a form can increase responses by 10-40% (Wroblewski, 2008). Placing labels above
the input decreases the time needed to fill in a form (Barga-Avila, 2011).
• Optimal text line lenghts depends on the task, even though all users report a subjective
preference for short lines (Ling and van Shaik, 2005).

27. 4. Relevant knowledge for practice.
Examples of knowledge gathered from design praxis:
• Use of the Grid System can organize graphic elements (images, glyphs, paragraphs) in
a rational, easy to absorb manner, by creating consistency and familiarity (and thus
building trust) in design. (see Müller-Brockmann, 1961)

28. 4. Relevant knowledge for practice.
Examples of knowledge gathered from design praxis:
• The arrangement of type involves the selection of typefaces, point size, line length,
leading (line spacing), adjusting the spaces between groups of letters (tracking) and
adjusting the space between pairs of letters
• Readability is highly influenced by the negative space between letters.
(see Lupton, 2010)

29. It's the negative space that keeps me positive.

30. 5. The value of superior user interface design
to a business.

31. 5. The value of superior user interface design to a business.
• The value of superior design is not that "it sells", but that it solves strategic
business challenges.
• 37signals.com doubled its conversion rate after implementing different designs
• Sunshine.co.uk (a holiday website) improved their search interface and increased their revenue by £14
million pounds
• The Design Council in the UK examined a portfolio of 63 companies publicly traded on the UK FTSE
Stock Exchange. Their study found that companies who emphasized “design” (however it was defined)
outperformed the FTSE 100 index by 200% during the time of the study.
• After move.com completed their redesign, users’ ability to find a home increased and sales leads
increased over 150%.
• According to IBM, in the month after the February 1999 re-launch sales went up 400 percent

32. 5. The value of superior user interface design to a business.
The online furniture store
• New online furniture store launched in Germany with a view to replication in other large
markets.
• Challenge: to transform thousands of printed catalogs and incomplete databases
into one single database, with accurate and complete information to be displayed
in the highly complex websites.
• By applying basic design thinking to the excel file, we improved processing speed by
20%.
• Data operators, marketing people, database managers and business managers were all
important stakeholders in the design process.
Example #2

33. 5. The value of superior user interface design to a business.
The Online furniture store
The value of the new interface:
• The new interface made processing of data easier, but it also enabled the staff to take on other
processess as well. This way the business could grow its product range enormously and gained a
strong position in the market.
• Efficiency in terms of time spent per data point doubled for data entry.
• The new interface allowed for quality assurance to be outsourced from the webshop company, further
reducing cost.
• By reducing time spent per data point, profitability of adding new products improved.
• Based on the above, with better processing times and an enlarged team the webshop was able to
increase its rate of adding new products fourfold.
Example #2

34. 5. The value of superior user interface design to a business.
The Online furniture store
The value of the new interface:
• We have also integrated very light gamification and motivation elements. This enabled
the data processing company to initiate new staff faster into the project as less training
was needed. This meant less bottlenecks.
• So the big gain was not in the reduction of cost for adding new products, but
the interface was a key component in the rapid establishment of the webshop in
the marketplace.
Example #2

35. 5. The value of superior user interface design to a business.
The Call Center
• An inbound call center where operators answer the phone in a company’s name and it
must seem genuine.
• It was difficult for operators to do their job and they used to quit after few months.
• Complete redesign based on a user centric perspective. By conducting interviews, trying
the experience of operators ourselves and conducting tests, we were able to improve the
interface significantly.
Example #3

41. 5. The value of superior user interface design to a business.
The Call Center
The value of the new interface:
• The key principle of the new interface, was to give operators complete control over all
events in the call to reduce stress.
• Further we facilitated the learning of the shortcuts to free up their mind when interacting
with someone on the phone.
• With the new interface, operators could focus their mind on the phone interaction, as
opposed to the software. Operators were given relevant information at the right time, so
they did not have to dig for it anymore.
• Before the average operator would last 6 months, while after the introduction of the new
interface the time extended to 14 months.
Example #3

42. 5. The value of superior user interface design to a business.
World Customs Organization
• The World Customs Organization operates a web based system to help fight the
smuggling of counterfeit goods. Companies can enter their products in a database along
with information on how to identify counterfeit versions.
• Usage data showed that customs officers did not use it much and the interviews with
users showed that this was not due to disinterest, but rather due to them not being able
to properly make use of the interface.
• Right holders would not enter sufficient data and customs officers hardly used the system
because of the interface.
Example #4

46. 5. The value of superior user interface design to a business.
World Customs Organization
The value of the new interface:
• Right holders had less information to enter as we did away with redundancy; the
information they enter follows a logical sequence.
• This in turn translated into more useful information for customs officers, and coupled with
a more intuitive search functionality and a better overview, they have to spend much less
time getting information.
• Good example of the value of a user interface, even when profit is not the criteria to
measure organization performance. It is also an example of how technology can
enable organizations to fulfill their mission; but sometimes design can act as a
barrier when it is not done correctly.
Example #4

47. 6. The process of interface design with the role of different
actors.

48. 6. The process of interface design with the role of different actors.
The process of interface design
• There are several phases and processes in the user interface design, some of which are
more demanded upon than others, depending on the project. (Lauren, 2012)
 Functionality requirements gathering
 User analysis
 Information Architecture
 Prototyping
 Usability Inspection
 Usability Testing
 Graphic interface design
 Testing
 Testing
 Testing

49. 6. The process of interface design with the role of different actors.
Functionality requirements gathering
• The appraisal of the basic requirements.
• The business purpose of the system is analyzed and often times a comparison to
competitor solutions helps to understand what makes the system unique.
• Technical requirements - most of the time there are limitations with regards to what a
certain system can do and how the user can interact with the backend database of the
system.
• Regulatory or security requirements.
• Deliverable: list of the functionality required by the system to accomplish the goals of the
project and the potential needs of the users.

50. 6. The process of interface design with the role of different actors.
User analysis
• The purpose is to understand user needs and different user types.
• Qualitative research: observation of users and interviews.
• Classification of users according to their characteristics.
(see Dickinger & Stangl, 2011, Differences between Goal-Directed and Experiential Search)
• User profile for each (potential) class of user, based on behavioural and
demographic variables.
• Identify user goals and attitudes. (Andrews, 2013)
• Deliverable: Overview of user needs analysis, plus draft catalogue of design responses
to needs analysis and personas.

51. (Adapted from Andrews, 2013)
Common evaluation methods

52. 6. The process of interface design with the role of different actors.
Information Architecture
• It refers to the overall structure of the system.
• It involves breaking up the actions and the information into logical parts.
• The information architecture gives the application intuitive navigation and coherence.
• Deliverable: schema of the process and/or information flow of the system.

54. 6. The process of interface design with the role of different actors.
Prototyping
• A wireframe is an elaborate sketch of a view that has sufficient details for all the
interaction to be clear, except that it lacks aesthetics.
• This step is highly iterative and it starts with very rough sketches which are then redrawn
with more detail.
• Finally one can build a clickable prototype based on the wireframes.
The Online Shop
• The shopping experience provides a virtual shopping aisle displaying thousands of items
currently on sale.
Example #5

58. 6. The process of interface design with the role of different actors.
Usability inspection
• Inspection of the user interface by an evaluator.
• It is cheaper to implement than usability testing, and can be used early on in the
development process since it can be used to evaluate prototypes or specifications for the
system, which usually can't be tested on users.
• cognitive walkthrough (which focuses the simplicity to accomplish tasks with the
system for new users)
• heuristic evaluation, in which a set of heuristics are used to identify usability
problems in the UI design
Usability testing
• testing of the prototypes on an actual user
• think aloud protocol, where you ask the user to talk about their thoughts during the
experience

59. (Adapted from Andrews, 2013)
The usability engineering lifecycle

60. 6. The process of interface design with the role of different actors.
Graphic interface design
• Actual look and feel design of the final graphical user interface.
• It allows users to interact with the system.
• The actions are usually performed through direct manipulation of the graphical elements.
The user interacts with information by manipulating visual widgets that allow for
interactions appropriate to the kind of data they hold.
• The graphics and widgets of a well-designed interface are selected to support the
actions necessary to achieve the goals of the user.

61. 7. What makes an interface effective?
Guidelines for optimal design.

65. Example #6

66. Example #6

67. 7. What makes an interface effective? Guidelines for optimal design.
Things that went wrong:
• A few more agency specific options would have been helpful to fulfill the needs of loyal customers of
the small agency.
• The design has a design centered approach, not user centered: there is too much decoration, while
usability elements are ignored.
• The visual hierarchy is not sufficiently clear: everything stands out and there is too much complexity.
• The information is not grouped into chunks.
• Inputs are too small.
• The top part repeats in subpages, making it difficult to reach the information in subpages.
• Search results are crammed together.

68. 7. What makes an interface effective? Guidelines for optimal design.
Flexibility-Usability Tradeoff Principle
• As the flexibility of a system increases, the usability of the system decreases.
• Flexible designs – more complex, more difficult to use.
(Adapted from Lidwell, Holden & Butler, 2010)

69. 7. What makes an interface effective? Guidelines for optimal design.
The Interference Principle
• Mental processing is made slower and less accurate by competing mental processes.
• Interference effects occur when two or more perceptual or cognitive processes are in
conflict.
(Adapted from Lidwell, Holden & Butler, 2010)

70. 7. What makes an interface effective? Guidelines for optimal design.
Performance Load Principle
• The greater the effort to accomplish a task, the less likely the task will be accomplished
successfully.
• Design should minimize performance load to the greatest degree possible.
(Adapted from Lidwell, Holden & Butler, 2010)

71. 7. What makes an interface effective? Guidelines for optimal design.
Form Follows Function Principle
• “Beauty in design results from purity of function” (p. 106 Lidwell, Holden & Butler, 2010)
• Defining success criteria is essential to good design.
(Adapted from Lidwell, Holden & Butler, 2010)

72. 7. What makes an interface effective? Guidelines for optimal design.
The Common Understanding Principle
• Communicating novel information using elements of common understanding.
• We have to identify and embed elements of common understanding.
• Also, we have to construct the message to be revealed in stages.
(Adapted from Sagan, Sagan, Drake, 1972)

73. 8. Design approach in everyday life.

74. 8. Design approach in everyday life.
What can we learn from design?
• Continuous optimization may be a key for a succesful project (or life).
• Problem-solving is a great strategy for overcoming daily obstacles.
• We have to listen to the people around us and try to improve their User Experience.
• Collaboration and openness to experience are essential for the understanding of self and
of others.
• Active imagination, aesthetic sensitivity, attentiveness to inner feelings, preference for
variety and intellectual curiosity.
• Play, explore, work, love, learn, TRAVEL and take care of the people around you.

75. Thank you for your time :)
I appreciate your feedback:
mihai@interface-design.co.uk

76. www.interface-design.co.uk
Follow @WebfooInterface