Creating User Experiences: Unlocking the Invisible Cage

Creating User Experiences:Unlocking the Invisible CageBilly HollisBillyhollis.comAAP312

1985-1995PCs: distributed computingLocal area networksGraphical user interfacesRise of the Internet

3PresentProliferation of devicesTouch computingUbiquitous connectivityCloud storage

For the history of software, its been good enough to make things possible. Now success also depends on making things easy.4HTML

Windows Forms

Classic Visual Basic

Java Swing

Etc.5File Edit Blah More blah Window Help5

Most common mistakeAssuming better design primarily means better aesthetics

Counter-exampleConexent SmartAudioFabulous cosmeticsIncomprehensibleoperation

10

12

1314

15

16

1718

19

Habit forms the invisible cage you live inHTML

Windows Forms

Classic Visual Basic

Java Swing

Etc.22File Edit Blah More blah Window Help22

Where you need to be

How do you get there?First step understanding underlying design principles

some of which go against the habits of your whole careerScreen real estate is valuable!Really? Pixels are freeHorror vacui

Fear of empty spaces

Gestalt PrinciplesHuman visual system is optimized to see structure and relationshipsThis leads to several principles of design that are collectively known as gestalt principlesProximitySimilarityCommon fateContinuity and Closure (filling gaps)Figure / ground

Proximity can be overridden by similaritySimilar objects are unconsciously grouped togetherVarious attributes can be used to make objects similarColorShapeSizeQ1Q2Q3Q4Gestalt: continuity and closureThe pre-processing in the visual system automatically fills in gapsThis is an evolutionary response to the need to recognize threats quickly

Gestalt: Figure / groundYour visual system unconsciously chooses what part of the field of vision to consider the foreground, or figureThis part of the field of vision gets the attention and focusThe rest is considered the background, or ground, and unconsciously given lesser importance

Figure / groundAssessment of figure and ground can changeA figure can change into a ground, and vice versaTo some degree, this is under conscious controlThis can also be used to maintain context in software

A common ground can be used for grouping

Design principle demonstrated:Inattentional BlindnessNext step: Expose yourselfto good and bad design in the real world

Next step become unsatisfied

Options to make it betterFavoritesList of recently used menu itemsRole-based subsets of itemsFind capability to locate the item neededCheckbox configurability But maybe what you really needIs a completely different navigation or interaction patternTimelineQueueViewport

DEV323, Wednesday 10:15, S320A Beyond Master Detail: Interaction and Navigation Patterns for Modern User ExperienceNext step: Force yourself to break freeStop designing applications the way youve always done itLeave your cageFile Edit Blah More blah Window HelpExercise going beyond rectanglesPrint out a crowded screen from your current applicationRedesign that screen from scratch on a blank sheet of paperRequirement: Your new design must include the curved shape below, in a non-trivial way (not just as an icon)

Other ways to use constraintsBillys design card deckPutting aside your first design, and creating another thats completely different

AvoidTaking lessons from graphic design and content design too seriouslyYoure doing interaction designStyling, colors, typefaces, etc. are the easy part and can be done late in the development processInteraction design must be done earlyResourcesUniversal Principles of Design(Revised and updated)

William LidwellKritina HoldenJill Butler93

Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules

Jeff Johnson

Drawing on the Right Side of the Brain

Contacting Billybillyhollis.combillyhollis@gmail.com, billyhollis@live.com Classes in design concepts and techniquesClasses in XAML technologiesConsulting on user interface design and constructionPluralsight course: Creating User Experiences: Fundamental Design Principles6/11/2012 6:51 PM 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

98