Holistic Approach to Web
•
1 like•1,915 views
In this deck I share a process aimed at delivering a great web experience regardless of the browser/device the user chooses to view it on. It describes the qualities of a great user experience and the process by which to achieve it. This approach helps us focus on the two most important things about the user, the content they want/need and the context in which they access it. It also benefits business, designers, content creators and developers by introducing ideas that help us create better, sustainable, future-friendly sites. This is the first deck I've uploaded and I see that PP animations don't work so a couple slides may not make complete sense. Slide 36 that says "Edit Ruthlessly, but thoughtfully." and shows Atilla the Hun and Dexter Morgan probably seems a bit odd. The thing is, the first time I presented this talk there was someone in the room that wasn't clear on the meaning of the word ruthless. Someone else said Atilla the Hun and that made ruthless crystal clear to them. To which I had to come up with someone that embodied ruthless but thoughtful and Dexter sprung to mind. Make sense? Good.
Recommended
More Related Content
Viewers also liked
Viewers also liked (9)
More from Mike Donahue
More from Mike Donahue (12)
Recently uploaded
Recently uploaded (20)
Holistic Approach to Web
- 1. Holistic Approach to Web Mike Donahue
- 2. The goal here is create a great web experience regardless of device.
- 3. What are the qualities of a great experience?
- 4. 1. Useful 2. Usable 3. Desirable
- 5. Useful: It helps users accomplish their goals.
- 6. Usable: Makes it simple for users to accomplish their goals.
- 7. Desirable: Makes users feel good before, during and after they accomplish their goals.
- 12. Content is WHY people come to the web.
- 13. Content: The thing(s) the user needs or wants to accomplish their goal(s).
- 14. The Mai Tai Diagram
- 16. “Design without content is decoration.” Jeffery Zeldman
- 19. “Make everything as simple as possible, but not simpler.” Albert Einstein
- 20. De-myth-ifying Myth: Mobile first is a design pattern.
- 21. De-myth-ifying Myth: Users have short attention spans.
- 22. De-myth-ifying Myth: Users want less content or features.
- 23. De-myth-ifying Mobile Myth: Users needs change with device.
- 24. De-myth-ifying Mobile Myth: Mobile first is only about smartphones.
- 25. Mobile First: A method to help us deliver a great user experience for every device.
- 27. Context: The users immediate needs and available resources to accomplish their goals.
- 28. Constraints: Anything that impedes the users ability to accomplish their goals.
- 29. Capabilities: Anything that improves the users ability to accomplish their goal. See also: progressive enhancement.
- 30. Mobile First is about People First and devices second.
- 31. What do people want?
- 32. Appropriately Concise Content and Features.
- 33. Appropriate: suitable or proper in the circumstance.
- 34. Concise: giving a lot of information but in a few words, brief but comprehensive.
- 35. How do we achieve appropriately concise?
- 36. “Edit Ruthlessly.” Kristina Halvorson “But thoughtfully.” Me Attila the Hun
- 37. “Truncation is not a content strat…” Karen McGrane
- 38. We need a mobile content strategy.
- 41. Progressive enhancement: Anything that adds value to useful, usable content without interfering with it in any way.
- 42. “There‟s a myth: progressive enhancement means „designing for the lowest common denominator.‟ No: it means STARTING there.” Jeremy Keith
- 43. Start with 100%useful and usable content.
- 44. Layer on style. Layer on features.
- 45. Above all else be unobtrusive.
- 46. Unobtrusive: Do no harm to content.
- 47. Semantic, Well-formed HTML Design Development Content (structured, appropriately concise) Basic CSS Basic JSBasic Styles & Features (color, typography, navigation) Nice CSS Nice JSNice Styles & Features (basic layout, basic interactions) OMG CSS OMG JSOMG Styles & Features (responsive, advanced interactions)
- 48. Enhancements never get in the way of content.
- 49. No enhancement will overcome bad content.
- 50. Example enhancements: Responsive web design Info-graphics JavaScript
- 51. Something still doesn’t “FEEL” right.
- 53. What’s in it for me?
- 54. You get an approach that aligns with • User Centered Design • Design Thinking • Agile Process
- 55. For content creators: (writers/designers) Create, curate, and maintain less, but highly effective content.
- 56. For developers: Less code, leaner code, that’s easier develop and maintain.
- 57. For business: Lower costs, improved sustainability, better product, and greater user satisfaction.
- 58. For users: The content and features they need regardless of device.
- 59. Progressive Enhancement Mobile First Content Out Meet base needs first. Holistic Approach to Web Useful Structured Content, Semantic HTML Be appropriately concise IA, UI & IxD Unobtrusive: Device Specific Features, Layout Enhancements, Visual Design, Interactivity Usable Desirable
- 60. Create Responsibly. Oh yeah, drink responsibly too.
Editor's Notes
- Let’s kick this off by getting clear on what the GOAL of this process is all about. What it aims to achieve.
- This is what we’re striving for. At least I hope this is it. Anyone not agree with this goal?
- Let me be clear here. This is simply the order in which we need to address these qualities and we’ll see why in a moment.This is not an order of importance. Each of these qualities needs to be satisfied in balance with the others. If we fail to fulfill any one of these we fail. It’s that simple.How can we be sure we’ve succeeded? Throughout this presentation I’ve included definitions for some key terms. Some straight out of the dictionary, some I’ve had to create. But all of them are written in way that we use them to measure our success. And they are geared specifically to this process.Let’s start with these three.
- Handled in this order, these qualities align nicely with Maslow’s Hierarchy of Needs.
- They also aligned with the Design Hierarchy of Needs created by Steven Bradley at smashingmagazine.com
- What’s even better is that they align with the approach we’re going to look at.Content is what people need to accomplish their goals.Mobile first will ensure we’ve made easy for the get to the content and accomplish their goals.Progressive enhancement will make it enjoyable to accomplish their goals.Let’s just take this one at a time.
- If you’re familiar with Simon Sinek, either you read his book or have heard him speak you know he’s all about Starting with the WHY.That’s what content is. It’s the WHY.
- Content is the reason the web came to exist in the first place.A bunch of researchers had a bunch of research (content) that they needed to share so the web was born.In fact most of the HTML elements we use are derived from the structure of that content they need to share.Heading elements, list elements, tables, abbreviations and so on. All tie back to the content.
- Notice I don’t specify any specific type of content like text, graphics or LOL kitty videos.The type is only important as far as it helps the user accomplish their goals.A definition’s nice but let’s look at what this means in the real world.
- This is the mai tai diagram.When we look at this it’s pretty clear what the primary content is here, the drink itself. Not the glass, straw, ice or fruit garnishes.The drinks what you’re paying for, not that other stuff. In this case they’re nice enhancements, but they’re not what we’re really after is it?What are we left with if we remove the contents, the drink in this case?
- You wouldn’t pay 8 bucks for that.What happens if we try to start here without know what content is coming?What if the content ends up being beer? Is this the right container now? What about the interface or the user widgets?We’d never go into a bar an say “Hey bartender. What king of glasses do you have so I can decide to drink?”Yet this happens all the time in design. ”Show me something so I know what I have to work with. Then I can fill it in.”It doesn’t make sense to start the design process here. Does it?
- This is why it so important to make sure that form follows functions.
- Each of these glasses has been specifically designed with their unique content in mind.Each of them create both limitations and expectations.Each provides functionality to enhance the consumption of it’s content.
- When I think about mobile first I think of Einstein.
- The real key here is not to over-simplify.Before we move on the what mobile first is. I’d like to put rest a few myths or misconceptions about mobile first and the mobile users context.
- It’s a of thinking about design and not a specific pattern. Responsive is a design patter. Off-canvas navigation is design pattern. Mobile first is not.
- No we don’t. In the face of information overload we’ve simply adapted and learned to prioritize our attention. We have plenty of attention to give it just might be to you..
- Again, no we don’t. We want as much as we need to get things done. I’ve read entire books on my smartphone. Usually while I’m waiting on things.
- Maybe it does, maybe it doesn’t. We can’t assume the device itself is dictating the needs. It’s more likely the user’s context is changing their needs, not the device.Actually what 2, 3, and 4 really tell us is that it’s not good to assume anything. Mobile first forces us to understand our user and the context, and their device is part of that context. Not the context itself.
- This is the biggie. I’ve ran into this more than any other. It’s simply not what mobile first is about. Hopefully y the time we’re done here that will become clear.Now that we’ve seen what mobile first is not. Let’s define what it is.
- We said that a great experience needs to be useful, usable and desirable.How does mobile first get us to a great user experience?
- Mobile first provides us with sub-process we can use to get to those rich, engaging experiences. Again, these should be handled in this order.Start by discovering every aspect of the users context. Where they, what they’re trying to get accomplished, what resources they, like what device they’re using, what else is happening around them, and so on.Look at the constraints that are affecting their context. Are they in a hurry, are there other things vying for their attention, are they on a slow network, do they have a small display or a older browser? Anything else that might hinder their ability to accomplish their goal.Finally, what do we have access to to improve their experience. Do we have GPS to tap into, are they using the latest and greatest browser, due they have plenty of free time? We’ll look at capabilities more when talk about progressive enhancement. For now let’s focus on context and constraints.Actually, let’s start by defining these as they apply to our approach.
- But please don’t take this to mean that enhancements are not part of mobile first. Mobile devices are some of the most capable device we have access to. In many ways they exceed the abilities of anything we have on a desktop.
- Knowing what the user really needs and wants is they key to a truly successful mobile first approach.Not making assumptions, but truly understanding what is best for their current situation.Part of that is knowing about their device is and what’s capable of.
- Anyone out saying to themselves “You said they may or may not want different. They may or may not want less. They may or may not have different needs. Well then what do they want?”
- What do I mean? Let’s start with definitions again.
- Let’s compare this definition to of viable which is; capable of working or feasible.Just because something works or is feasible doesn’t guarantee that it’s what we need or want. In other words, it might not be appropriate.When we think in terms of suitable or proper we change the way we assess things and how they solve the users needs.
- Let’s compare this definition to of minimum which is; the least amount possible, attainable or required.If we simply reach the bare minimum and we loose what makes our content comprehensible they fail to meet our first goal of useful.We don’t want that.
- For the answer I turn to content maven Kristina Halverson.
- This goes for content, graphics, features, and code. But how do we ensure we don’t overdo it?CLICK: So I’d like to add this.The first time I shared this presentation there was someone that wasn’t clear on what “ruthless” meant. Someone offered up Attila the Hun as an example. Good example of ruthless, right?Which got me think about “thoughtfully.” How do show that along with ruthless?CLICK: Dexter. Everyone’s friendly, neighborhood serial killer. He’s definitely ruthless no doubt. But it’s focused and purposeful ruthless that makes the world a better place.In his book “The Laws of Simplicity”, John Maeda refers to “thoughtful reduction” and that’s what we should be striving for.Content strategist Karen McGrane understands this difference. CLICK
- We can’t simply go mindlessly slashing away at our contents and features. We need a plan for them. CLICK
- Depending on how you look at it. A mobile strategy may be the only one you need. Maybe it’s a companion to a larger content strategy. Anyway you slice it, you need a plan.
- Comedian Mitch Hedberg said “An escalator can never break it can only become stairs.”
- So how do we break this down?
- We can’t simply go mindlessly slashing away at our contents and features. We need a plan for them. CLICK
- By this I mean written content that has proper structure based on good writing. Proper use of headings, tables, lists, and so on.In development it means translating that structured content into semantic, well-formed HTML.
- Only then do we begin to enhance it through visual design and interactions.
- But above all else we must make sure that remain unobtrusive.
- By that I mean this.The dictionary defines unobtrusive as; not conspicuous or attracting attention, but how do we measure against that?Usually when it breaks. Isn’t that when we know failed at being unobtrusive. I becomes very conspicuous and attracts a whole lot of unwanted attention.So what does this look like?
- It goes something like this. Working from the bottom.
- Notice how these enhancements set different expectations. That stein better have great German beer in it.One more thing about enhancements. CLICK
- How many thought of responsive as a progressive enhancement?Info-graphics may look great on a big screen but they usually don’t do so well on small.JavaScript is probably the biggest culprit of doing harm to content.
- Some people are probably feeling like I use to. This just doesn’t feel right. It doesn’t sit well with me for some reason.I went through the same feelings. After more than 20 yeas as designer this process didn’t feel natural.It took a long time until I discovered why. The answer is because we’re not just designers we’re users.
- As users we’re drawn to things that move us. Things of beauty and elegance. The shiny, sparkly things in the world.This can drive us as designers to want to address those aspects first. DON’T!Many of us have likely brought something, or someone, into our lives simply based on beauty or appeal. Only to discover later that it, or they, lack any true substance.This what users find when too much effort is placed on the desirability and not enough effort on making things useful and usable first.We need to learn to trust the process. We can only create truly great experiences if there is balance.
- This is the big question, right?
- This entire process is meant to keep our eye on the user at all times. The Mobile first aspect really drives this home. Once we have a starting point, a hypothesis if you will, we can begin prototyping and testing and iterating.The process itself is unobtrusive.
- Here it is in a nutshell.
- Go out and create responsibly.