Flatly Authentic Digital Design
•Als PPTX, PDF herunterladen•
1 gefällt mir•471 views
This document discusses principles of flat and authentic digital design. It provides information on designing for different screen sizes and interfaces. Guidelines are presented for designing interfaces that clearly communicate hierarchies of information through graphical positions, summary data, and detail views. Recommendations are given for typography sizes across different device classes. The document concludes with principles of good design, including fulfilling practical needs, expressing the spirit of the times, and serving a wide public with consideration for modest needs.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Ähnlich wie Flatly Authentic Digital Design
Ähnlich wie Flatly Authentic Digital Design (20)
Mehr von Steven Hoober
Mehr von Steven Hoober (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (7)
Flatly Authentic Digital Design
- 2. 2
- 3. 3
- 4. 4 Flat design has always been a thing. Even long before digital, simple graphic design is some of the most classic work.
- 5. 5
- 6. 6
- 7. 7
- 8. 8
- 9. 9
- 10. 10
- 11. 11
- 12. 12
- 13. 13
- 14. 14
- 16. 16 Sun/Moon Data
- 17. 17
- 19. 19 First, Don’t Draw • Graphical positions • Summary data • Detail views • Sunrise/Sunset time • Moonrise/Moonset • Sun/Moon transit times • Sun, twilight • Moon phase, percentage lit • Civil, nautical, astronomical • Key moon phase dates • Change date, calendar • Azimuth, distance • Sky cover (local weather)
- 20. 20
- 21. 21
- 22. 22
- 23. 23
- 24. 24
- 25. 25
- 26. 26
- 27. 27
- 28. 28
- 29. 29
- 30. 30
- 32. 32 65%60% 84%
- 33. 3333
- 34. 34
- 35. 35
- 36. 36
- 37. 37
- 38. 38
- 39. 39 Primary • Graphical sun position • Graphical moon position • Times • Phase, % • Transit • Text labels Hierarchies of Information Secondary • Detail view • Calendar • Dates • Azimuth, distance Tertiary • Location • Nautical, civil, astro switch • Weather
- 41. 41 Information Design (Box Model)
- 42. 4242
- 43. 4343 62% 24% 9%
- 44. 44
- 45. 45
- 46. 46
- 47. 47 2.5” 3.5” 5” 7-10” In Stand 4 pt 6 pt 7 pt 8 pt 10 pt
- 48. 48 Type size in points Device class Minimum Basic content Enhanced content H3 H2 H1 Small phone 4 5.5 7.2 8.5 10.8 14.4 Large phone 6 8.5 10.8 12.6 16.2 21.6 Phablet 7 9.8 12.6 14.7 18.9 25.2 Small tablet 8 11.2 14.4 16.8 21.6 28.8 Large tablet / desktop 10 14 18 21 27 36
- 49. 49 At least 7:1 for normal text At least 4.5:1 for large text Black & White is 23:1
- 51. 51 Time to Draw
- 52. 52 Time to Draw
- 53. 53
- 54. 54
- 55. 55
- 56. 56
- 57. 57
- 58. 58 1. Fulfill the practical needs of modern life 2. Express the spirit of our times 3. Benefit by contemporary advances in the fine arts and pure sciences 4. Take advantage of new materials and techniques and develop familiar ones 5. Develop the forms, textures and colours that spring from the direct fulfilment of requirements in appropriate materials and techniques 6. Express the purpose of an object, never making it seem to be what it is not 7. Express the qualities and beauties of the materials used, never making the materials seem to be what they are not 8. Express the methods used to make an object, not disguising mass production as handicraft or simulating a technique not used 9. Blend the expression of utility, materials and process into a visually satisfactory whole 10. It should be simple – its structure evident in 11. Master the machine for the service of people 12. Serve as wide a public as possible, considering modest needs and Good Design
- 59. 59
- 60. 60
- 61. 61 Contact me for consulting, design, to follow up on this deck, or just to talk: Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01 on: www.4ourth.com
Hinweis der Redaktion
- How 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
- We know it’s 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. ADD CHINESE TRANSLATION HERE
- Today'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? ADD CHINESE TRANSLATION HERE
- The 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. ADD CHINESE TRANSLATION HERE
- Your design can be awesomely 3D and color and animated, or painted on the tail of a plane, but there’s 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. ADD CHINESE TRANSLATION HERE
- Microsoft was one of the first to do all this, with their universal use, and heavy promotion of Modern UI. They don’t talk about the roots of it enough for everyone to understand why it’s important. This is a screenshot I took just the other day of my work tablet. ADD CHINESE TRANSLATION HERE
- And 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. ADD CHINESE TRANSLATION HERE
- Google 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 it’s important. Much of what is bad about flat has come from this belief that… ADD CHINESE TRANSLATION HERE
- … screens are flat. I mean look at them. They are flat! But I am not sure why this is unique. It’s 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. ADD CHINESE TRANSLATION HERE
- But 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… ADD CHINESE TRANSLATION HERE
- Literally 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 HERE
- This 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 it’s just a temporary condition, but the previous view is waiting for you ADD CHINESE TRANSLATION HERE
- Layering extends to components within a single page as well. This is flat design, right? Yeeessss… but it’s not truly flat. ADD CHINESE TRANSLATION HERE
- The 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 it’s a real world thing, but just emphasize the actual layering that exists. ADD CHINESE TRANSLATION HERE
- 15
- For the exercise part of this session I am going to work on this. I use Sun/Moon charts a lot, but don’t like them very much. They are dense, it’s 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. ADD CHINESE TRANSLATION HERE
- Sun/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 that’s a way to approach this: You can also bring up good alternative ideas, competitors and patterns. Just don’t apply them blindly because they are trendy, make sure it’s 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 don’t wait for me. Get to work as I keep talking! ADD CHINESE TRANSLATION HERE
- And the first thing we do is Definitely Not Draw new solutions. First, we need to understand. What do we have to work with. Let’s take what we have now, and circle and annotate what it is important. ADD CHINESE TRANSLATION HERE
- Here’s I’ve pre-written bullets based on looking at the various apps, cause it’s 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. I’ll have an example later of how you can use the Post-It’s 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. ADD CHINESE TRANSLATION HERE
- Okay, hang on to those, because we’ll 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. ADD CHINESE TRANSLATION HERE
- Touchscreens 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 ADD CHINESE TRANSLATION HERE
- For 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/ ADD CHINESE TRANSLATION HERE
- By the late 1960s, light pens had come down to pen sized, and were usable on reasonably modern-looking systems to do tasks we’re familiar with in touchscreens: point, select, copy, paste, gesture, etc. ADD CHINESE TRANSLATION HERE
- When we talk about touch today we mean Capacitive Touch. That’s what’s 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. ADD CHINESE TRANSLATION HERE
- Big sensors. You can even see them sometimes. ADD CHINESE TRANSLATION HERE
- Sensor 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. ADD CHINESE TRANSLATION HERE
- Everyone 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? ADD CHINESE TRANSLATION HERE
- Your thumb includes the bones that extend all the way down to your wrist. Plus, the thumb’s joints, tendons, and muscles interact with your other digits—especially 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 thumb’s movement is in three-dimensional space, touchscreens are flat, so a limited part of the thumb’s range of movement gets mapped onto the phone’s screen. ADD CHINESE TRANSLATION HERE
- So THIS widely-distributed chart is impossible. It’s not how thumbs work. Try to trace those edges sometime. My thumb makes popping noises and I can not even quite do it. ADD CHINESE TRANSLATION HERE
- The 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 aren’t a disability. People don’t stretch, they adapt. Thumb reach is not really a thing and people with small hands don’t buy small phones. People shift their grip as needed, among all these methods of holding. ADD CHINESE TRANSLATION HERE
- -- 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 that’s 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. ADD CHINESE TRANSLATION HERE
- -- 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. Don’t assume anything, or try to force your users into one method. ADD CHINESE TRANSLATION HERE
- The 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.) ADD CHINESE TRANSLATION HERE
- We can also chart the rate of use of various methods. And note that one handed is not very common. ADD CHINESE TRANSLATION HERE
- But 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. ADD CHINESE TRANSLATION HERE
- So 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. ADD CHINESE TRANSLATION HERE
- So, 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. ADD CHINESE TRANSLATION HERE
- You 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. ADD CHINESE TRANSLATION HERE
- And we’re going to extend this principle to the designs we’ve started. Let’s 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, don’t 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) ADD CHINESE TRANSLATION HERE
- Now 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 aren’t sure what design pattern to follow, you don’t 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. ADD CHINESE TRANSLATION HERE
- We 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. ADD CHINESE TRANSLATION HERE
- OKAY, now we’ve only got some scribbles and words. Let’s 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 people’s 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… ADD CHINESE TRANSLATION HERE
- And 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 arm’s reach away, [CLICK] And almost 10% [CLICK] with pen styluses. Yeah, that’s a pen hiding under the case. ADD CHINESE TRANSLATION HERE
- In general, the smaller the device is, the more it is used on the move. On the move doesn’t 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. ADD CHINESE TRANSLATION HERE
- And as devices get larger, they are used less and less held in the hand. Distance from the eye can be surmised by device class. ADD CHINESE TRANSLATION HERE
- This is critical partly because we don’t 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… ADD CHINESE TRANSLATION HERE
- Small 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. ADD CHINESE TRANSLATION HERE
- This is the hierarchy of sizes I use on various devices. ADD CHINESE TRANSLATION HERE
- The 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. ADD CHINESE TRANSLATION HERE
- Now, 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 ADD CHINESE TRANSLATION HERE
- SO, pull out your favorite notebook, your favorite pen, and whatever project you brought with you… ADD CHINESE TRANSLATION HERE
- … or if you didn’t 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 don’t matter, but millimeters. 15 MINUTES… REVIEW ADD CHINESE TRANSLATION HERE
- 53
- 54
- 55
- 56
- 57
- 58
- Thanks very much for your time today. In case you don’t know who I am: I have written books, and regularly write articles, even ones published in paper magazines. ADD CHINESE TRANSLATION HERE
- I 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. ADD CHINESE TRANSLATION HERE
- And 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 doesn’t have the resolution, just Google my name and you’ll find me. TIME FOR QUESTIONS? CLOSING: CARDS, STICKERS, TOUCH TEMPLATES FOR SALE