• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 

Interface Design

on

  • 434 views

Interface Design - an overview on recent findings in HCI research and examples of interfaces created by WebFoo Interface Division. ...

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.

Statistics

Views

Total Views
434
Views on SlideShare
432
Embed Views
2

Actions

Likes
1
Downloads
5
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Interface Design Interface Design Presentation Transcript

    • 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
    • www.interface-design.co.uk Follow @WebfooInterface
    • 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.
    • 1. Introduction and main terminology
    • 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)
    • 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)
    • 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.
    • 1. Introduction and main terminology (Adapted from Moore, 2009)
    • 2. The interdisciplinary nature of contemporary design of HCI
    • 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)
    • 2. The interdisciplinary nature of contemporary design of HCI
    • 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.
    • 3. A philosophical and theoretical framework for contemporary Interaction design.
    • 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)
    • 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)
    • 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)
    • 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.
    • 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)
    • 3. A philosophical and theoretical framework for contemporary Interaction design. (Adapted from Card et al, 1983 )
    • Come, my sweet paradigm. Let's shift into something more comfortable.
    • 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)
    • 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)
    • If you're not bored by now, you're not paying attention.
    • 4. Relevant knowledge for practice.
    • 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!) SCIENCEDESIGN PRAXIS
    • 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).
    • 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)
    • 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)
    • It's the negative space that keeps me positive.
    • 5. The value of superior user interface design to a business.
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 6. The process of interface design with the role of different actors.
    • 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
    • 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.
    • 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.
    • (Adapted from Andrews, 2013) Common evaluation methods
    • 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.
    • 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
    • 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
    • (Adapted from Andrews, 2013) The usability engineering lifecycle
    • 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.
    • 7. What makes an interface effective? Guidelines for optimal design.
    • Example #6
    • Example #6
    • 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.
    • 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)
    • 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)
    • 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)
    • 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)
    • 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)
    • 8. Design approach in everyday life.
    • 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.
    • Thank you for your time :) I appreciate your feedback: mihai@interface-design.co.uk
    • www.interface-design.co.uk Follow @WebfooInterface