Towards Understanding the User Interface Designer's Environment: An Empirical Approach Peter Mortimer, 31.07.2017, Munich Guided Research Final Presentation Guided Research Final Presentation Advisor: Adrian Hernandez-Mendez

Outline Motivation State of the Art Research Process Conclusions Final Presentation Peter Mortimer © sebis

Motivation Final Presentation Peter Mortimer © sebis

? Motivation Design Development UI Designer Developer Customer Manager My Guided Research topic is motivated by the fact that there are many innovations in how data is can be presented to the user, for example if you consider the many frontend frameworks developed for the web. Creating good UIs requires expertise in UI and UX design, that software developers do not necessarily have. So the UI Design is done by a UI Designer, who typically belongs to the design team in a company. But so far the is very little research on the current professional practices of UI designers in terms of their workflow and the development tools. [1] Newman, M., Landay, J.: Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice as Manifested Through Artifacts. Final Presentation Peter Mortimer © sebis

How do UI designers create UI prototypes? Research Questions How do UI designers create UI prototypes? What are currently the state of the art UI design tools? How does the communication between the developer and the UI designer work? What are the main artifacts created in the UI design process? Design Development Prototype -> any artifact built to test a concept or process and to make assumptions about the final design Final Presentation Peter Mortimer © sebis

State of the Art Final Presentation Peter Mortimer © sebis

Set of Microinteractions Prototypes My report should also inform the reader on the current standards in modern UI design Includes definitions on different prototypes Companies tend to use different terms to describe the same type of prototype e.g.: Interactive UI Design = Clickable Dummy = Flinto Prototype Pen & Paper Wireframe Style Guide Static UI Design Components Library Set of Microinteractions Interactive UI Design Code Final Presentation Peter Mortimer © sebis

Pen & Paper, Whiteboard7 Wireframe8 Very early stage of the design process Does not take long to develop Limited interactivity and detail Can already reveal usability issues Wireframe8 Presents functionality, features, content, and user flow But not the visual design yet Drawn on paper or in dedicated software solutions Pen & Paper, Whiteboard -> relatively short-lived prototype [7] Sefelin, R., Tscheligi, M., Giller, V.: What is it good for? A Comparison of Paper- and Computer-based Low-fidelity Prototyping. [8] Garrett, J.: The Elements of User Experience: User-Centered Design for the Web and Beyond, Chapter “Design Comps and Style Guides” Final Presentation Peter Mortimer © sebis

Static UI Design9 Style Guide Non-interactive image of final UI Design First impression on Visual Design (Color, Font,…) Covers only a small aspect of the whole UI Style Guide Defines all Visual Design standards and conventions for the domain Layout and composition, typography, and color palette Consistent UI system improves the overall usability10 [9] Garrett, J.: The Elements of User Experience: User-Centered Design for the Web and Beyond, Chapter “Design Comps and Style Guides”. [10] Gale, S.: A collaborative approach to developing style guides. Final Presentation Peter Mortimer © sebis

Set of Microinteractions Components Library Component is a piece of the web site UI Components are organized in a library (buttons, menu bar,...) Useful for automatic UI composition11 Set of Microinteractions Contained product moment Single function and very detailed12 Interactive demo, that conveys intended user experience [11] Karuzaki, E., Savidis, A.: Yeti: yet another interface composer. [12] McDaniel, R.: Understanding Microinteractions as Applied Research Opportunities for Information Designers. Final Presentation Peter Mortimer © sebis

Interactive UI Design Code High-fidelity prototype without writing UI code yet Most UI components are interactive and showcase their function Code Could be the final UI or just a prototype written in Code HTML/CSS/JS for Front End Development Harder to make quick design changes Final Presentation Peter Mortimer © sebis

Software Solutions UI Designer commonly combine multiple tools in their UI design process Prototypes are inherently too different for one tool for all Tools specialize traditionally only in one or two types of prototypes Participants were given 32 tools to choose from Final Presentation Peter Mortimer © sebis

Software Solutions – Overview Wireframe Style Guide Static UI Design Components Library Set of Microinteractions Interactive UI Design Code Points to mention here: Many tools in the prototype category “Interactive UI Design” Most Interactive UI Design solutions are extension on Sketch, a popular tool used to create Static UI Design which natively does not include animations Some tools specialize in one prototype category (balsamiq in “Wireframe”, Principle in UI Animation Design / “Set of Microinteractions”) Many of the Interactive UI Design include features like automatically generating stylesheets and components libraries (goal of creating a all-in-one solution) Final Presentation Peter Mortimer © sebis

Research Process Final Presentation Peter Mortimer © sebis

Survey Goals Survey Structure Explorative Survey2 Contact as many different practitioners as possible Qualitative results: ask open questions Pre-study for a more thorough investigation Explorative Survey2 Survey Structure 3 Questions on UI Design Process 3 Questions on UI Design Tools 5 Questions on Communication with Developer [2] Wohlin, C., Runeson, P., Höst, M., Ohlsson, M.C., Regnell, B., Wesslén, A.: Experimentation in Software Engineering. [3] Here is the link to the survey. Final Presentation Peter Mortimer © sebis

Selection Different work environments for UI Designers: UI Designer is employed at a design agency Freelance UI Designers work on a project-to-project basis4 Large companies have their own Design Team UI Design process and Developer communication depend on work environment Created two contact lists: one with companies, one with freelancers Restricted the UI Design domain to customer-facing web and mobile UIs Companies and freelancers both receive the same survey [4] Gandini, A.: Freelance Creatives: Good Jobs, or Bad Jobs? Final Presentation Peter Mortimer © sebis

Survey – Company Selection Mostly design agencies and companies in the Munich area Company sizes range from around 20-1000 employees Evaluation based on company website and portfolio of previous work Contacts gathered through web search and local interest groups (IxDA Munich) Contacted a total of 60 companies IxDA – Interaction Design Association Final Presentation Peter Mortimer © sebis

Survey – Freelancer Selection Freelancers are distributed all across Germany Mostly individuals, sometimes teams (no more than 3 in one team) Established freelancing platforms like Upwork5 restrict access to contact information Newer freelancing platforms like Better Talk To6 allow for open freelancer search using keywords Keywords: UX, UI, Web Design, Interaction Design Regular web search also led to many contact, since most freelancers have their personal web site Contacted a total of 100 freelancers Higher number of contact, since it was easier to find suitable freelancers than companies. Companies also allowed for the possibility, that multiple UI Designers fill out the survey, while a freelancer is only one person [5] Freelancing platform upwork.com [6] German freelancing platform bettertalk.to Final Presentation Peter Mortimer © sebis

Respondents Only represents half of the responses. These participants filled out the survey and did not leave their email address, So that we could find here. Companies: econcess, eresult, designaffairs, pilotfish, ui/deation, intuit (Stuttgart), Freelancers: Dennis Schröder, Christina Metzler, Finn Fischer und Björn Claussen -> All interested in receiving the report afterwards Final Presentation Peter Mortimer © sebis

Survey Distribution Survey was first distributed via Email low response rate no guarantee that the survey ends up by the UI designer Idea: Visit local companies and distribute business cards with survey link Can give the card to the UI Designer directly More likely to respond (≈50%) Visited 19 companies in total Final Presentation Peter Mortimer © sebis

Survey Results Section Total Responses 18 / 160 participants completed the survey (completion rate: 11.25%) Average completion time was 12 minutes and 27 seconds Questback also stores the results of uncompleted surveys, leading to the following response numbers for each section: Section Total Responses 1. 3 Questions on UI Design Process 23 2. 3 Questions on UI Design Tools 3. 5 Questions on Communication with Developer 18 Add also how many participated in the survey and when they left the survey. Final Presentation Peter Mortimer © sebis

What type of prototypes do you produce in your design process? 23 total responses, multiple choice question Newer prototype categories like Set of Microinteractions are not widely used yet UI Designers do not deliver their final design as code Still separate task for Web Developer The relatively new Interactive UI Design prototypes are popular Wireframe Style Guide Static UI Design Code Components Library Interactive UI Design Set of Microinteractions Pen & Paper, Whiteboard Final Presentation Peter Mortimer © sebis

Which tools do you use to create your prototype? 5 10 15 20 Code Interactive UI Design Set of Microinteractions Components Library Style Guide Static UI Design Wireframe 5 most popular tools Software Responses Release Year Sketch 20 2010 Photoshop 14 1988 Illustrator 12 1987 InVision 11 2014 Axure 8 2002 23 total responses, multiple choice question Photoshop, Illustrator -> Adobe Systems Software Sketch -> Bohemian Coding Axure -> Axure Software Solutions InVision -> InVision Final Presentation Peter Mortimer © sebis

What are in your opinion the main limitations of the current UI design tools? On Tool Diversity: “No tool offers an all-in-one solution […] Switching between each tool is often tedious, requires in detail knowledge of a lot of different tools and makes hand-off to developers difficult.” “Repetitive tasks still a hassle; automation not sufficient; no simple tool to create a quick interactive mockup.” On Microinteraction Development: “Very limited interaction patterns and liquidity in microinteractions. You cannot get all ideas and design paradigms across to the customer. Too much explanation needed. Up to interpretation of customer.” Optional question with an text field as response. A total of 14 responses Final Presentation Peter Mortimer © sebis

Conclusions Final Presentation Peter Mortimer © sebis

Conclusions Prototype-driven development for customer-facing UIs Transition towards software solutions for interactive UI designs No all-in-one solution Microinteractions are still too simple for UI designers Need for automated and searchable style guides Final Presentation Peter Mortimer © sebis

Future Work In-depth comparison of the newer software solutions Might lead to new automation possibilities Consolidating design processes to known methodologies Only step-by-step design process descriptions so far Final Presentation Peter Mortimer © sebis

Progress Final Presentation Peter Mortimer © sebis

Peter Mortimer 17132 matthes@in.tum.de

Backup Final Presentation Peter Mortimer © sebis