• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Effectively communicating user interface and interaction design
 

Effectively communicating user interface and interaction design

on

  • 6,279 views

A glossy screen mock-up or an interactive prototype may be the first step to sharing your user interface and interactions design with development teams. However additional communication is often ...

A glossy screen mock-up or an interactive prototype may be the first step to sharing your user interface and interactions design with development teams. However additional communication is often needed to ensure that the implementation matches the concept. Learn approaches to conveying design information and how to use each.

Originally presented in December 2010 at the STC Suncoast meeting.

Statistics

Views

Total Views
6,279
Views on SlideShare
6,122
Embed Views
157

Actions

Likes
6
Downloads
128
Comments
1

9 Embeds 157

http://eventifier.co 78
http://lanyrd.com 55
http://www.linkedin.com 8
https://twitter.com 6
http://www.eventifier.co 3
http://twitter.com 2
https://www.google.co.uk 2
https://www.linkedin.com 2
http://eventifier.com 1
More...

Accessibility

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

11 of 1 previous next

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

    Effectively communicating user interface and interaction design Effectively communicating user interface and interaction design Presentation Transcript

    • © 2010 K. BachmannEffectively CommunicatingUser Interface &Interaction Designby Karen BachmannResearch & Analysis Practice LeadPerficient XD
    • © 2013 K. BachmannCommunicating UI Design | 2UI Design ProcessWelcome to the MarketPlace, Member! TheMarketPlace is your online source for officesupplies, computer software and hardware, andprofessional services, all at your discount prices.If you have any questions about the Marketplace,please contact Customer Care.Review InboxPlace an OrderMarketPlace HelpMarketPlaceMarketPlaceClient BrandPartnerBrandMain Brand & Copyright© 2009 Ours?!
    • © 2013 K. BachmannCommunicating UI Design | 4class GoodbyeCruelWorld {public static void mainargs){System.out.println(”Goodbye}}class HelloWorld {public static voidmain(String[] args){System.out.println("HelloWorld!");}}Bacon ipsum dolor sit amet pancetta swine shankfatback. Short ribs beef leberkas, jerky pork chop t-bone doner turkey shankle. Bresaola pork chopvenison, cow ground round corned beef frankfurter.Tongue ground round short loin flank.LabelLabelLabel LabelAnalysis?Ham tenderloin sirloin leberkas jowl ribeye. Excepteur pork belly andouille,irure short ribs ea minim bacon dolor ham hock qui officia aliquip incididuntut. Adipisicing ut incididunt, turkey duis drumstick andouille short ribsoccaecat in turducken. Ullamco in irure culpa spare ribs pig.LabelIdeally, design and development iterateBacon ipsum dolor sit amet pariatur capicoladoner, occaecat do dolor cillum sint. Laboris in doquis, officia anim pork loin shank. Strip steak short loinbrisket pariatur duis prosciutto commodo.
    • © 2013 K. BachmannBacon ipsum dolor sit amet pancetta swine shankfatback. Short ribs beef leberkas, jerky pork chopt-bone doner turkey shankle. Bresaola pork chopvenison, cow ground round corned beeffrankfurter. Tongue ground round short loin flank.LabelLabelLabel LabelHam tenderloin sirloin leberkas jowl ribeye. Excepteur pork bellyandouille, irure short ribs ea minim bacon dolor ham hock qui officiaaliquip incididunt ut. Adipisicing ut incididunt, turkey duis drumstickandouille short ribs occaecat in turducken. Ullamco in irure culpaspare ribs pig.LabelBacon ipsum dolor sit amet pariatur capicoladoner, occaecat do dolor cillum sint. Laboris in doquis, officia anim pork loin shank. Strip steak short loinbrisket pariatur duis prosciutto commodo.Communicating UI Design | 5System Test& Shipclass HelloWorld {public static void main(String[]args){System.out.println("HelloWorld!");}}class GoodbyeCruelWorld {public static void main(String[]args){System.out.println(”GoodbyeWorld!");}}AnalysisMore frequently, design and development are separate?
    • © 2013 K. BachmannCommunicating UI Design | 6Designs can be changed over time Without input from the designer Without a thorough understanding of the user goals thedesign serves Without recognizing the underlying rationale in designdecisions
    • © 2013 K. BachmannCommunicating UI Design | 7Prepare for change: Design communicationCommunication supporting the design helps the final productmatch the original user goals and informs required changesHi! Let me tell you aboutmyself…
    • © 2013 K. BachmannCommunicating UI Design | 8http://nathanbowers.com/art/free-downloadable-abstract-wall-art/Prototypes: Worth 1,000 words?Busy andconfusingDynamic andexcitingYes, but are they the words you meant?
    • © 2013 K. BachmannCommunicating UI Design | 10Who is the audience Developers Project managers Visual designers Content authors Project sponsors & stakeholders System testers & UAT managers Usability testers
    • © 2013 K. BachmannCommunicating UI Design | 11What to communicate Full interactions and system behaviors Initial state of each screen element How each element behaves when the user interactswith it How user action changes (or not) each element Navigation and screen flows Rationale and user goals each design decision supports Which requirements that the design supports
    • © 2013 K. BachmannCommunicating UI Design | 12What to communicate (cont’d) Data that is input and data that is returned Errors and messaging Content requirements As much detail as needed to support implementation
    • © 2013 K. BachmannCommunicating UI Design | 13How best to communicate designGeneral overview Exhaustively detailedAll stakeholders Project teamWalkthroughpresentation withscreen-levelcommentsUI designspecificationScreen shotswith call-outs onspecific elements123Screen flowdocument
    • © 2013 K. BachmannCommunicating UI Design | 14Select the approach that works for you Interaction between designers and developers during thedevelopment process Varied needs for different team members Methodology used to guide the development life cycle Culture of the organization and the development team(formal, informal, collaborative, etc.) Maintenance requirements and future development support
    • © 2013 K. BachmannCommunicating UI Design | 15What about format?Use what worksWikiWritten documentationSpreadsheetBack of a napkinPresentationAuto-generated specificationCASE toolDrawing softwareUser story notecardIn-person discussions
    • © 2013 K. BachmannCommunicating UI Design | 16Self-contained communication helps UI designer may not remain engaged with a project Interaction between designer and developers may be limited Developers do not always consult with designer aboutchanges Maintenance developers usually have to go italone, resulting in some interesting design mutations as asystem ages May be required with some development methodologies All teams need effective guidance “to process the productrequirements into a more detailed format” [Wikipedia]
    • © 2013 K. BachmannCommunicating UI Design | 17Specification vs. Style guide A specification describes the specific controlsused, interactions, data, content, and validation that takeplace with a UI design to create a user experience A style guide specifies the layout of pages, choice ofcontrols, and positions of those controls relative to the wholein order to deliver a consistent look and feel Usability guidelines specify overarching usability goals fortypes of interactions
    • © 2013 K. BachmannCommunicating UI Design | 18UI specification vs. System requirements “In general, the goal of requirement specifications are todescribe what a product is capable of, whereas the UIspecification details how these requirements areimplemented in practice” [Wikipedia] Requirements answer what the system should do; UIspecification answers how the system will do it Requirements come first and should be implementationindependent
    • © 2013 K. BachmannCOMMUNICATIONAPPROACHESSo what does this look like?Communicating UI Design | 19
    • © 2013 K. BachmannCommunicating UI Design | 20Walkthrough presentation A live presentation of the design screens or prototype toother team members, a guided tour Shows every major screen and most interactions Explains important design considerations Notes key inputs that need to be considered Answers questions Includes a companion handout of key screens and atleast screen-level notes
    • © 2013 K. BachmannCommunicating UI Design | 21Walkthrough presentation (cont’d) Demonstrates design to stakeholders as well as thedevelopment team Can be the only addition to the prototype if Designer remains a resource to the development team Scope of the project is small More formal documentation is not part of the projectculture/methodology (that is, they won’t read it anyway)
    • © 2013 K. BachmannCommunicating UI Design | 22Example: UI mockup with comments This basic profilescreen is whereusers are takenwhen they opt toCreate a profilefrom the homepage. The language iscasual inkeeping withbranding and UXapproach ofoverall site.
    • © 2013 K. BachmannCommunicating UI Design | 23Screen shots with call outs Shows each screen with call-outs highlighting key pointsthat aid understanding the design Shows every major screen and most minor screens Explains the key screen elements and features of the design Highlights issues or alternative cases Provides a general reference for stakeholders as well as thedevelopment team Can be the only addition to the prototype if Designer remains a resource to the development team Product is well-defined (upgrade, established product type, etc.)
    • © 2013 K. BachmannCommunicating UI Design | 24Example: Screen shot with call outs1. The language is casual inkeeping with brandingand UX approach ofoverall site.2. Users can specify how touse their physicaladdress. Shipping optionis checked by default.3. User name would use theemail, if provided, butuser can change.4. Help text for passwordwill update as user types.Messages includeminimum characters(shown in example);strong, good, weakindicators for passwordstrength; and invalidpassword warning.1234
    • © 2013 K. BachmannCommunicating UI Design | 25Screen flow document Shows each screen in task order Explains the key screen elements and features of thedesign (may be paired with call-outs) Highlights issues or significant alternative cases May omit message dialogs Provides a general reference for stakeholders as well as thedevelopment team Will directly support writing user documentation, system testcases, and usability test scenarios
    • © 2013 K. BachmannCommunicating UI Design | 26Screen flow document (cont’d) Is a useful companion to a prototype to ensure functionalityis not missed — user guide for the prototype Is a good choice when The designer has moderate to low level of engagementwith the project during development User tasks are complex and/or the system is highlytransactional The prototype is a partial representation or not interactive
    • © 2013 K. BachmannCommunicating UI Design | 27Example: Screen flow document When you click the Create My Profilebutton, you reach the Thank Youscreen with options to add moreinformation. Click the arrow next to the What I wantto know (or don’t) item. The itemexpands to show all email options.Screen note: The Thank You messageonly appears the first time. Subsequentprofile editing reuses the options, buthas a different introduction.Screen note: Sales announcements andProduct highlights and reviews areselected by default.
    • © 2013 K. BachmannCommunicating UI Design | 28UI design specification Details each screen and each element Explains the screen elements and features of the design(may be paired with call-outs) Highlights issues or alternative cases Describe message dialogs Provides a detailed reference primarily for the developmentteam
    • © 2013 K. BachmannCommunicating UI Design | 29UI design specification (cont’d) Is a good choice when The designer will not have a high level of engagementwith the project during development Scope of the project is larger or will be long-lived More formal documentation is part of the projectculture/methodology The prototype is a partial representation or not interactive
    • © 2013 K. BachmannCommunicating UI Design | 30What details to specify Type of control Initial state of the field, including defaults Point of entry or pre-requisite conditions Supported interactions and behaviors Interaction business rules, such as whether the field isrequired Requirements, use case, and prototype screen references Accessibility guidelines supported Rationale for use of a particular widget or pattern (tied touser research or UI standards)
    • © 2013 K. BachmannWhat details to specify (cont’d) Data displayed or accepted Data returned Examples of the kinds of information users may enter Validation or data normalization rules Errors and other messaging End state of the field Any questions or discussion around a particular design thatmay not be finalizedCommunicating UI Design | 31
    • © 2013 K. BachmannCommunicating UI Design | 32Example: UI design specification document
    • © 2013 K. BachmannCommunicating UI Design | 34Example: UI design specification spreadsheet
    • © 2013 K. BachmannAxure specification Detailed UI specification built into a prototype Generates either as a specification document or asannotations and page notes in the HTML prototype Annotations sometimes are enough Reminders to development team Sufficiently “visible” design Heavy documentation not appropriate for environmentCommunicating UI Design | 36
    • © 2013 K. BachmannExample: Axure specificationCommunicating UI Design | 42
    • © 2013 K. BachmannExample: Axure prototype with annotationsCommunicating UI Design | 43Page Notes describethe page overall.Annotations describe eachparticular element.
    • © 2013 K. BachmannSUMMARY THOUGHTSWrapping it all upCommunicating UI Design | 44
    • © 2013 K. BachmannCommunicating UI Design | 45Key points to remember Design guidance ensures that the user and business goalsbehind the UI and interaction design are achieved by everyversion of the end product Designs change — Be prepared to support that changewhile protecting user goals Deliver information that works and will be used by the wholeteam Provide as much detail as needed and no more
    • © 2013 K. BachmannCommunicating UI Design | 46Read More Laura Brandenburg. “How to create a user interface specification.” Bridging the Gap:http://www.bridging-the-gap.com/how-to-create-a-user-interface-specification/ Dan Brown. Communicating Design. 2nd Ed. New Riders Press: 2010. Peter Gremett. “Using Wikis to Document UI Specifications.” Boxes and Arrows:http://www.boxesandarrows.com/view/using-wikis-to Brian R. Krause. “Getting Creative With Specs: Usable Software Specifications” Boxesand Arrows:http://www.boxesandarrows.com/view/getting_creative_with_specs_usable_software_specifications Karen McGrane. “Were All Content Strategists Now.” IDEA 2010:http://ideaconference.org/2010/speakers/Karen-McGrane Nokia. “UI Specifications” Design and User Experience Library v2.0:http://library.forum.nokia.com/index.jsp?topic=/Design_and_User_Experience_Library/GUID-AC29156A-7992-45ED-93A2-C4B8ED6614F3.html Wikipedia. “User interface specification.”http://en.wikipedia.org/wiki/User_interface_specification Thomas Memmel Zuerich. “Interactive User Interface Specifications” The UsabilityArchitect (personal blog): http://www.usability-architect.com/search/label/UI%20specification%20practice
    • © 2013 K. BachmannTHANK YOU!I hope you got that “nugget” that helps!Communicating UI Design | 49
    • © 2013 K. BachmannCommunicating UI Design | 50About meKaren Bachmann, the Research & Analysis Practice Lead withPerficient, helps clients deliver usable products that support how usersneed and expect to interaction with information and perform their tasks.Karen is a member of STC, UXPA, and ACM SIGCHI. She is a formermanager ofthe Usability & User Experience community and is an Associate Fellowof STC.She lives with 6 ferrets and a cat, who view her andthe other human in the house as necessary, althoughhard-to-train, staff.Karen can be reached karen@seaconinc.com orkaren.bachmann@perficient.com. Slides are available onSlideshare: http://www.slideshare.net/karenbachmann/communicating-ui-designslideshareGot treats?