flatly authentic digital design

PowerPoint Presentation

@shoobe01@UXPA_China

Flatly Authentic Digital Design

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaHow many of you were in my previous session? RAISE HANDS! This can be an extension of the previous workshop. We will take an idea, and draw it for a mobile phone or tablet interface.

Many of you work every day seated behind a woodgrain desk.

ADD CHINESE TRANSLATION HERE

1

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaWe know its not wood. Because wood might be too expensive, inconvenient, or maybe like this chair simply impossible to use to build the way we want.

WALL OR SOMETHING IN ROOM

For centuries there has been a tension between authenticity (usually coupled with simplicity) and decoration, sometimes coupled with facades and the implication of falseness.

There is no one right answer. Often, a veneer is the best solution, partly because we are building for people. You are probably happier behind a Wood desk than one that is unabashedly plastic and MDF.


2

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaToday's digital world is full of open, and airy, beautiful, tediously identical, and unusable designs. Basically because of things like THIS.

Because Apple and many others took the false veneer (simulating something else, or skeuomorphism) too far.

Applying simulated surface effects (or real world effects to digital interfaces) can be helpful but is easily overdone. How does fine stitching enhance this interface, inform the user about anything shown here, or even help you feel good about finding your friends?


3

Flat design has always been a thing. Even long before digital, simple graphic design is some of the most classic work.

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaThe opposite has been termed flat design but is really a range of principles that tend to gravitate around Swiss Modernism as the ideal.

It is not new. Even long before digital, simple graphic design is some of the most classic work. Brand designers still say does it FAX, which is shorthand for any low-res work.


4

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaYour design can be awesomely 3D and color and animated, or painted on the tail of a plane, but theres always a fallback to flat, black and white stuff for stenciling on crates and thermal printing on boarding passes.

These are well-understood design principles.


5

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaMicrosoft was one of the first to do all this, with their universal use, and heavy promotion of Modern UI. They dont talk about the roots of it enough for everyone to understand why its important.

This is a screenshot I took just the other day of my work tablet.


6

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaAnd THIS is from Encarta, 15 years ago.

Despite much of Windows before the Metro/Modern era really embracing the rounded, gradient, and nearly-realistic icon motif, the roots go back to the 1990s. Microsoft at least bits and pieces of it -- recognized more than a lot of people that this design language works for digital products.


7

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaGoogle Material Design is the one that has really made flat design take off lately. Partly from simply supporting it so robustly, with not just guides but whole sets of icons to use, and deep support of it in their development platforms.

Android has leapt ahead in design from this.

But in many ways, Material design is key because they explain why its important. Much of what is bad about flat has come from this belief that


8

#@shoobe01@techjobslafair@shoobe01@UXPA_China screens are flat. I mean look at them. They are flat!

But I am not sure why this is unique. Its not like paper was 3D.

When Nielsen Norman group refers to the right way to do flat design, they say you can make use of subtle shadows, highlights, and layers to create some depth in the UI.

CREATE depth.


9

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaBut look at your phone, or computer. Or your TV, or anything.

When your app or website has a dialog, it appears on top of the screen


10

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaLiterally on top. Software is built in layers. Dimensionality in digital interfaces is REAL.

When you click an item you open a new view and add to the stack.

ADD CHINESE TRANSLATION HERE11

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaThis concept is one reason dialogs work so well. The temporary condition is explicitly on top of the page. Because new views appear on top, and the reduced size indicates that its just a temporary condition, but the previous view is waiting for you


12

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaLayering extends to components within a single page as well.

This is flat design, right? Yeeessss but its not truly flat.


13

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaThe fields and buttons on top of the map are ON TOP OF THE MAP. Literally.

Everything has a layered position, and it behaves this way. Items on top block items below. Items scroll behind things, based on this layering.

They even have little shadows, which are not affectations, or ornaments, or pretending that its a real world thing, but just emphasize the actual layering that exists.


14

Authentically Digital

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaInstead of being flat, or skeuomorphic, or anything else when the next trend comes, we need to start being "Authentically digital."

Stack any design trends you wish upon that, but reflect the layers, use standard components, meet user expectations for the way they know systems work, and follow physiology and cognitive psychology to make sure users can see, read and click.


15

Sun/Moon Data

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaFor the exercise part of this session I am going to work on this. I use Sun/Moon charts a lot, but dont like them very much. They are dense, its hard to find the information I need, and traditionally key information mixes weather and astronomical data so you need more than one source.

You can follow me and do the same work on your own, or you can apply the same principles today to any project you are working on, or to any other app or website (on mobile, tablet, desktop, or anything) that has bothered you, and you think you can improve.


16

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaSun/moon data is highly information dense, and there are several ways to approach it. I rather like the Yahoo Weather graphical sun thing here to the lower right. So thats a way to approach this: You can also bring up good alternative ideas, competitors and patterns.

Just dont apply them blindly because they are trendy, make sure its relevant to the data you want to present, and your users will understand it.

Anyway, this is a good proxy for any complex data you have. Imagine you need to communicate process control, or results of research. Same principles. I will do this, as you do yours, so dont wait for me. Get to work as I keep talking!


17

First, Dont Draw

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaAnd the first thing we do is Definitely Not Draw new solutions.

First, we need to understand. What do we have to work with. Lets take what we have now, and circle and annotate what it is important.


18

First, Dont Draw

Graphical positionsSummary dataDetail viewsSunrise/Sunset timeMoonrise/MoonsetSun/Moon transit timesSun, twilightMoon phase, percentage litCivil, nautical, astronomicalKey moon phase datesChange date, calendarAzimuth, distanceSky cover (local weather)

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaHeres Ive pre-written bullets based on looking at the various apps, cause its hard to do that and talk and look interesting at the same time.

Everyone take 5 minutes to make your own list of all the features that exist on the product you want to improve. Write them down as a list, or type on your computer. However you are comfortable working with them.

One good way is to write each idea on a Post-It note. Ill have an example later of how you can use the Post-Its to reorganize the information nicely.

FIVE MINUTES

If you just want to follow my example, write down this list, or any other things you think need to be on it.


19

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaOkay, hang on to those, because well use them in a few minutes.

SEGUE

People are real, dimensional, and not quantifiable as pixels on a screen.

They use their phone in real environments, so even when designing just a phone screen, we cannot assume that the interaction is entirely with a flat glass rectangle.


20

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaTouchscreens have been around long before Apple invented them. Before touch, and actually before the mouse, there were pens, or the stylus if you prefer. The use method is similar, and today all touchscreens can use a pen, but we tend to focus on the primary use case, fingers.

Early stylus systems were called Light Pens. Here in the first production application, the SAGE system for the USAF, which used a gun in the first iteration. The pen was actually a reader, closely coupled to the timing of the display so it could tell what part of the screen it was looking at.

Great video here: http://motherboard.vice.com/blog/sage-the-secret-project-to-protect-the-u-s-with-the-biggest-computer-in-the-world


21

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaFor those from that era, the Nintendo Duck Hunt gun used the same principle. If it saw the target encoding on the CRT, it knew it was pointed the right way.

Explained: http://www.howtogeek.com/181303/htg-explains-how-the-nintendo-zapper-worked-and-why-it-doesnt-work-on-new-tvs/


22

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaBy the late 1960s, light pens had come down to pen sized, and were usable on reasonably modern-looking systems to do tasks were familiar with in touchscreens: point, select, copy, paste, gesture, etc.


#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaWhen we talk about touch today we mean Capacitive Touch. Thats whats used on ALL mobile phones, tablets and increasingly everything else remotely small these days. Computers, cars, everything.

In capacitive touch, your finger is electrically detected by a grid of sensors.


#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaBig sensors. You can even see them sometimes.


#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaSensor size means that precision is achieved by math, and that it cannot tell the size of your finger or pressure, but just gets points on a screen.


#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaEveryone assumes that all phones are still small iPhones, grasped with one hand, and tapped with the thumb.

Is this right? Is it even possible?

What do you know about your thumb?


27

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaYour thumb includes the bones that extend all the way down to your wrist. Plus, the thumbs joints, tendons, and muscles interact with your other digitsespecially the position of the index finger. If your fingers are grasping a handset, there is a more limited range of motion available to the thumb. But moving your fingers lets you change the area your thumb can reach.

Bending is important because, while the free range of the thumbs movement is in three-dimensional space, touchscreens are flat, so a limited part of the thumbs range of movement gets mapped onto the phones screen.


#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaSo THIS widely-distributed chart is impossible. Its not how thumbs work. Try to trace those edges sometime. My thumb makes popping noises and I can not even quite do it.


#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaThe data I and others have found, from lots and lots of research, tells us that people shift their grips, and hold phones in many ways. This is one reason that larger phones arent a disability.

People dont stretch, they adapt.

Thumb reach is not really a thing and people with small hands dont buy small phones. People shift their grip as needed, among all these methods of holding.


49%26%10%36%

#@shoobe01@techjobslafair@shoobe01@UXPA_China-- 75% of people only touch the screen with one thumb. But that can be misleading. [CLICK]-- Because fewer than HALF hold the phone with one hand also, and thats for phones. Much less for phablets and tablets of course. [CLICK]-- 36% cradle the device, using a second hand for reach or stability. [CLICK]-- And fully 10% hold in one hand, and tap with a finger, giving a totally different interaction.


31

65%

60%

84%

#@shoobe01@techjobslafair@shoobe01@UXPA_China-- People hold their mobile devices in CLICK portrait orientation 60% of the time, and landscape 40% - BUT, that is for all device classes. -- CLICK Tablets are used much more in landscape, 65% of the time a 10 tablet is used in landscape. -- I still design everything to work in all orientations on all devices. -- CLICK 84% touch the screen with their right hand. Not nearly enough to assume ALL users use their right hand, so design for both.-- And the distribution does not match the percentage of left handers in the population which is confusing. Most people also switch hands, a lot, during a a single session.

So, design for multiple contexts, and for switching between them. Dont assume anything, or try to force your users into one method.


32

33

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaThe more I watch people, the more I am amazed at how variable their interactions are.

How they are comfortable changing their hand position. how they touch the screen in different ways to do different things with their devices, as they change tasks and context.

(Video from set of user interviews I did in spring 2014 on teen use of mobile devices. A teenager with her Galaxy Tab.)


33

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaWe can also chart the rate of use of various methods.

And note that one handed is not very common.


34

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaBut we are starting to understand how the way people hold devices changes by CONTEXT. Hardly anyone holds their phone with two thumbs on the screen

unless they are typing [CLICK] when it jumps up to 41% of uses.


35

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaSo where DO people tap?

[CLICK] When you account for content position and different devices, you find that most taps are in about the center half of the page.

This is true for phones, and tablets equally.


36

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaSo, you might think that when you copy the UI for something like this, the key controls are the actions and input at the top and bottom of the viewport.

[CLICK] but in fact the primary content and interactive area is in the middle of the page.


#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaYou can extend this to a useful design guideline, which aligns well with how many apps are made today.

Your primary content and function goes in the center, secondary functions along the top and bottom edges, and tertiary functions in the Menu.


38

PrimaryGraphical sun positionGraphical moon positionTimesPhase, %TransitText labels

Hierarchies of InformationSecondaryDetail viewCalendarDatesAzimuth, distance

TertiaryLocationNautical, civil, astro switchWeather

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaAnd were going to extend this principle to the designs weve started.

Lets organize the information we have into categories.

We know we have to put everything in only three tiers of information. That which is visible at a glance, stuff along the edges, and stuff one click away.

Now, how many people have got a custom list? RAISE HANDS

For those using my list of features, dont use the categories I made up. Pick the items YOU think need to be at each level of visibility.

FIVE MINUTES... (this would be done with a team, with user input, etc. In reality)


39

Information Design

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaNow I am going to take my hierarchy chart, and draw out a solution using that principle of design by hierarchies. This is what I really call Information Design, and when you arent sure what design pattern to follow, you dont draw solutions but arrange boxes, or even just post-it notes.

The relative importance of the elements is expressed, and you have a place to move to for design.

I mostly scribble, and draw boxes on whiteboards, and type boxes into design tools. But you can use post-it notes for this. It works pretty well, especially for group exercises, or if you have troublesome content.


40

Information Design (Box Model)

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaWe can also call this a box model, as you just draw it in boxes, with little or no actual UI.

Now, obviously not all content is the same size, so you can SORT OF do some UI pre-work by guesstimating how much space elements take up.

ETC. DO THIS ALL IN INDD DRAWING.

THEN GIVE THEM 5-15 MINUTES ON THEIR OWN.


41

42

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaOKAY, now weve only got some scribbles and words. Lets look at key issues to get the design actually sensible.

Stop saying fragmentation as though it is bad. Respect user choice. Devices are different, because peoples needs are different, and this is reflected in the way the devices are used.

We all think of our typical smartphone being held around 12 inches -- or 30 cm -- from the eyes, and when walking around.

But phablets (and something like half of smartphones sold now have screens over 5) are used a little more when sitting down


42

4362%24%9%

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaAnd tablets are used almost 2/3rd of the time in a stand [CLICK] or set down on tables.

Large tablets, like the 10 iPads, are used about of the time with physical keyboards, with the screen at almost arms reach away, [CLICK] And almost 10% [CLICK] with pen styluses.

Yeah, thats a pen hiding under the case.


43

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaIn general, the smaller the device is, the more it is used on the move.

On the move doesnt mean in busses or on trains, but can just mean when you walk around the house or office. Instead of finding time to stop and use that tablet on the table, or sit and type on a computer at your desk.


44

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaAnd as devices get larger, they are used less and less held in the hand.

Distance from the eye can be surmised by device class.


45

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaThis is critical partly because we dont view anything based on size, but on resolution at our eyeballs. And the relationship between this and that is called angular resolution. Which we can calculate


46

2.53.557-10In Stand4 pt6 pt7 pt8 pt10 pt

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaSmall handsets are held very close to the eye, larger ones and phablets further away, and tablets at approximately desktop distance since so many are in stands, with keyboards.

[CLICK] Minimum text sizes vary from 4 point for small handsets, to 10 points for devices set on tables or in stands. Yes, this really depends on the actual context, but we can make very good guesses based on device class.

These are MINIMUMS. At least 30% larger for almost all actual uses like body copy. Even larger for more readability, for active environments, and for older populations.

Icons and other elements follow these same scale rules, and can roughly follow about these actual sizes. They have the same concerns of readability as text.


Type size in points Device classMinimumBasic contentEnhanced contentH3H2H1Small phone45.57.28.510.814.4Large phone68.510.812.616.221.6Phablet79.812.614.718.925.2Small tablet811.214.416.821.628.8Large tablet / desktop101418212736

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaThis is the hierarchy of sizes I use on various devices.


48

At least 7:1 for normal textAt least 4.5:1 for large textBlack & White is 23:1

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaThe other critical thing about type is contrast. I like to pretend mobiles are used 100% by people with vision issues colorblindness, nearsighted, etc. This way we have to use the best of the WCAG recommendations, the AAA standard.

If these seem stringent, they are not. I most use white on black which is 23:1 contrast ratio. I do black backgrounds to reduce total light output, when I can. The brand of your app or site matters.


49

Interface Design

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaNow, I expand on the box model with real content, and even if hand drawing, I refer to my basic size guidelines to be sure I have content the right size.

ETC. BRIEF EXAMPLE


50

Time to Draw

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaSO, pull out your favorite notebook, your favorite pen, and whatever project you brought with you


51

Time to Draw

#@shoobe01@techjobslafair@shoobe01@UXPA_China or if you didnt bring anything to draw on or with, I have some phone and tablet sketching templates you can use, and some Sharpies you can borrow.

Drawing at scale is critical if you are going to use size guidelines. Whether on screen or on paper, use PHYSICAL scale. Pixels dont matter, but millimeters.

15 MINUTES

REVIEW


#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaI want to wrap up with another point about Good Design.

Good Design is not any style. It doesnt mean you have big blocks of color and isometric icons.


53

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaIt doesnt mean you have to use lots of big type as a design element, and remove your tabs in favor of a hamburge

ADD CHINESE TRANSLATION HEREr menu.54

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaIt doesnt mean ANY current style.


55

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaHow about this?

The hero image is interactive its a key part of the way the site works.


56

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaAnd this crazy thing is a website for an egg producer! It legitimately gives the basic, boring info about why eggs are good for you and where to buy them, and even has backup menus so you dont have to scrub the whole page.

And it matches their overall brand style. You should see what they post to their Facebook page. An airy, typographically-driven website wouldnt be like them at all.


57

Fulfill the practical needs of modern lifeExpress the spirit of our timesBenefit by contemporary advances in the fine arts and pure sciencesTake advantage of new materials and techniques and develop familiar onesDevelop the forms, textures and colours that spring from the direct fulfilment of requirements in appropriate materials and techniquesExpress the purpose of an object, never making it seem to be what it is notExpress the qualities and beauties of the materials used, never making the materials seem to be what they are notExpress the methods used to make an object, not disguising mass production as handicraft or simulating a technique not usedBlend the expression of utility, materials and process into a visually satisfactory wholeIt should be simple its structure evident in Master the machine for the service of peopleServe as wide a public as possible, considering modest needs and limited costs no less challenging than the requirements of pomp and luxuryGood Design

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaAnd its still perfectly good design.

Edgar Kaufmann Jr., Director of Industrial Design at MOMA in New York spoke out against a style follows sales mentality by putting on a series of Good Design exhibitions at the museum in the 1950s.

Part of this was a set of principles of good design which are still much used today, at least by furniture designers and decorators.

There are some lovely ones that really apply today. I mean Master the machine for the service of people?! Awesome

But most relevant today we find #7 Express the qualities and beauties of the materials used, never making the materials seem to be what they are not.

Lets not follow trends, but build authentically digital products for our devices, our users, and our brands.


58

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaThanks very much for your time today.

In case you dont know who I am:

I have written books, and regularly write articles, even ones published in paper magazines.


59

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaI have been designing since apps like this were totally awesome and ground breaking, for carriers, manufacturers and many more companies than I have listed here. Yeah, I worked for Sprint for 9 years, which is where a lot of my phone knowledge came from.


60

Contact me for consulting, design, to follow up on this deck, or just to talk: Steven [email protected]+1 816 210 0455@shoobe01shoobe01 on: www.4ourth.com

#@shoobe01@techjobslafair@shoobe01@UXPA_ChinaAnd I do all this because I have an abiding sense of disappointment over where we are, and optimism over where we could be.

If you have questions or need more info, follow me, or contact me directly. If you miss these addresses or your phone doesnt have the resolution, just Google my name and youll find me.

TIME FOR QUESTIONS?

CLOSING: CARDS, STICKERS, TOUCH TEMPLATES FOR SALE61

flatly authentic digital design

Mobile