Screen Design. What I Wish I Knew When I First Started Making Websites
•Download as PPTX, PDF•
2 likes•927 views
The goal is to help new web designers and developers think of websites as a chain of connected pages that create a unique path for the user instead of static pages that live in their own little world with simple connections to other pages.
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Screen Design. What I Wish I Knew When I First Started Making Websites
- 1. What I wish I knew, when I first started making websites. by David Sparks
- 4. The 1st thing I wish I knew when I started building websites.
- 5. Free Tip #1 Grid paper helps too.
- 8. Free Tip #2 “I can do this faster on the computer”
- 9. Limited Edition FREE Quick-Tips! • Don’t be an artist. • Be fast. • Sketch to communicate. • Get comfortable with mistakes.
- 11. Screen Design. • What is it? • It’s the act of consciously deciding what content, elements or functionality is necessary based on relationships. • Think about user paths.
- 12. 10 Screen Design Questions to Ask Yourself. Why is someone on this screen? 1.
- 14. 10 Screen Design Questions to Ask Yourself. How did the user get to this screen? 2.
- 15. 10 Screen Design Questions to Ask Yourself. What is the next screen they will go to? 3.
- 16. 10 Screen Design Questions to Ask Yourself. What is the main action that the user should take on this screen? 4.
- 17. goodui.org
- 18. goodui.org
- 19. 10 Screen Design Questions to Ask Yourself. What happens if a user does not take this action? 5.
- 20. bestbuy.com
- 21. 10 Screen Design Questions to Ask Yourself. Are there other actions that a user is being given that could be a distraction? 6.
- 22. bestbuy.com
- 23. litmus.com
- 24. 10 Screen Design Questions to Ask Yourself. How would they know what to do if it were their first time on this screen? 7.
- 25. 10 Screen Design Questions to Ask Yourself. What could be removed from this screen? (Nothing? Then, ask again.) 8.
- 26. 10 Screen Design Questions to Ask Yourself. Can you map each feature on this page back to a goal or need of a user? 9.
- 27. 10 Screen Design Questions to Ask Yourself. What role does this screen play in fulfilling the value proposition to the user? 10.
- 28. Overview 1. Why is someone on this screen? 2. How did they get to this screen? 3. What is the next screen they will go to? 4. What is the main action that the user should take on this screen? 5. What happens if a user does not take this action? Does their experience break? 6. Are there other actions that a user is being given that could be a distraction? 7. How would they know what to do if it were their first time on this screen? 8. What could be removed from this screen? Nothing? Then, ask yourself again. 9. Can you map each feature on this page back to a goal or need of a user? 10. What role does this screen play in fulfilling the value proposition to the user?
- 29. UX Learning • uxmag.com • adaptivepath.com/ideas • uxapprentice.com • goodui.org • smashingmagazine.com/category/uxdesign • sarahdoody.com
- 31. @DigitalSkraps
Editor's Notes
- Thanks for having me, and thanks to Bryan Robinson for inviting me. Today I’m going to talk about “Screen Design” which is a sort of catch all term for my purposes today. Im going to share some of my most helpful techniques and tools I use that relate to screen design. And things I wish i knew when i first started making websites.
- First, a little bit about myself. My name is David Sparks. I work at archer malmo as a User Experience Architect. Something of a mix between a “User Experience Designer” and an “Information Architect”. My background is front-end development for around 7 years. A day at my job sometimes consists of user research and analysis usability audits user testing journey diagrams and flows wireframes, working prototypes and information architecture to name a few. The things I design are best when you don’t notice them at all. I don’t make things pretty, I make them usable and accessible so that people won’t get frustrated. That’s also why my text is so big. It may not be pretty, but its really accessible.
- Before we get started, my original talk idea was just about Screen Design. It was something that I wished I knew when I first started making websites but as I got started, I kept gravitating more towards my own sub-headline over my original point. So instead of just talking about screen design, I’m going to share some of my favorite “Things” I wish I knew back in the day. My hope is that, these are some simple things you can all start doing today. If you do, they’ll improve the usability and experience of your project. With the formalities out of the way, I’ll get on with it already.
- The FIRST thing I wish I knew, when i started making websites was… “Sketch, Don’t draw.”. I didn’t understand why sketching before getting on the computer would help when i first started. It seemed like jumping straight into photoshop or whatever software was faster because I had so many tools. Over the last year, I made a commitment to start doodling and sketching more often and it has been a big help to me. my speed in creating assets has increased and I have better ideas with fewer potential user pain points. and i have them faster. I’ve noticed one thing that keeps people from sketching is fear that it’s something they can’t do. We’ve learned one way or another that drawing is an artistic skill and some of us believe we don’t have this incredible talent. If I said “Raise your hand if you wish you could draw better”, i bet everyone would raise their hand. And I would as well. But I have great news! This line of thinking misses the point. The point is: drawing isn’t always an artistic exhibition. Sometimes it’s a means of communication. For some reason “sketching” has a less serious tone and people seem to feel more willing to take part if you use this word. Drawing sounds involved. Sketching sounds fun and accessible. With this mindset you also find yourself more willing to grab pen and paper as a means to test your ideas out first. Putting this into practice will not only help you create better interactive products, but will help you communicate your ideas with team members and colleagues quickly without much effort. If you have a vision for how something should be, sketching your idea out can be the difference between implementation and the trash can. With practice you also end up getting pretty good at drawing boxes. Sooner or later someone is going to think your boxes look amazing. Suddenly you’re drawing and you were to afraid to before. So a couple free tips to get you sketching ideas out more often.
- Free tip # 1 Use pens or sharpies. ink basically. Pencils are for people who need to fix mistakes. When we sketch our ideas out, the goal is to make mistakes. Ink forces you to commit to your first impulses or ideas, and those are exactly the things you need to get out early. This way, once you get to wireframing or design you’ve solved some simple problems that eat up quite a bit of time on the computer. Pencils tempt you to get the line straight. To correct spelling. or even to write out text when it can be done quicker. Also, grid paper is the best thing ever for wireframes.
- here you can see the grid paper i use and the general amount of detail that my wireframes have. The biggest time sketching savers are: Place Holders Lines for text Yellow indicates links Generic Header Write out important headlines, but everything else just is a line. In this image you can see there are headline, paragraph and list examples. The goal here is to sketch out the general organization of elements. The elements on the page that you have to have for the product to work. You want to have a refined idea of where everything should go before you get to the computer. (these were also final sketches after many drafts so they’re a little more clean than my first pass).
- This is a sketch I did with a co-worker, more dirty in comparison. He walked me through the requirements and I sketched out what I felt he was trying to communicate. The purpose here is to understand the business goals so that you can decide what the user will need from an interface. Also you’ll noticed the screens were sketched out together to understand their relationships better. That’s part of screen design which we’ll talk about in a minute.
- Free Tip #2. Stop thinking “I can do this faster on the computer”. If this is true it means one thing. You’re drawing, not sketching. Depending on the job, i probably sketch for about 15minutes to an hour. It depends on how many screens are required or to put it better how many problems have to be thought through. In the first sketch i showed you I spent a couple hours or so doing a lot of sketches. Some in a group setting. those were the master sketches where we kept the best ideas and merged them together. The second sketch i showed you happened in about 45 minutes and after that I jumped right into axure (my wire framing software). That’s what sketching is for… Problem solving. A lot of times i’ll sketch out just the UI elements that are going to be difficult so I can understand what they must have to work right
- I also have some super limited edition FREE quick-tips! (Can you tell I work in advertising? ) Don’t be an artist. Being an artist is great, but it only slows you down in this stage, which is not what we want. What we want, is to be fast. Not fast in the sense of rushing through things but fast movements or strokes. The faster we are with each stroke the more ideas we’ll be able to get on paper. Sketching slowly gives room self doubt which counter productive. You’re better letting good and especially bad ideas out. Fast strokes overrides that part your brain and allows you to get in the zone. So you stop filtering yourself. Getting the ideas out is the most important part. That’s how we communicate. Get comfortable with mistakes. This is the most forgiving area of the project there is. It’s actually the perfect place for mistakes. Mistakes in this case mean: spelling straightening out lines, things are too squished together etc etc. Bad layouts Layouts you know won’t work but your curious anyway Or a layout the client suggested that you know wont work. Sketch it out, sketch out a better version of what they described and let them see both. Some clients will stick to their guns, but many will see the thought you put into their project and change their mind. I have a personal mantra that I repeat to myself sometimes. It goes like: “how many bad ideas have you had today?” You can’t get to the good ideas, without working through the bad ideas first. Often we get so self conscious about our bad ideas, we don’t let enough of them out to discover we had great ideas the whole time.
- With that out of the way, Lets talk about Screen Design. The SECOND thing I wish I knew, when i started making websites was… “Thinking about a website as a collection of static pages with simple connections causes fragmentation in our thinking that is different from the real nature of websites. or apps. (Screens, my catchall). ” The real nature of websites is that they’re a single organism that is experienced uniquely by a user. This section I’m going to run through 10 questions that I’ve been using. Having a formal list of questions can help you be more rigorous in your process so that emotion or opinions are less of an influence. The questions were written by Sarah Doody and they helped me better define my own process, with a little more detail. So I’m going to borrow them from her and give them to you!
- So what is Screen Design? To me, It’s the act of consciously deciding what content, elements or functionality is necessary based on relationships. Think of your project as a family of screens that are connected to each other and not just individual pages These connections are the base layer for a user experience. Without smart meaningful connections, the experience can fall apart. User Path or User Journey diagrams are a great tool for getting more used to this line of thinking. If you’re not sure where to start creating a user journey diagram is a helpful exercise in understanding how screens and things off the screen are connected. Thinking about the journey a user takes while interacting with your product helps us better understand their nature. But we don’t always need these diagrams. Projects may only have a few touch points so they’re not very informative or maybe there isn’t enough time. So, these questions can fill in that gap a little quicker. You can use them at any time and they’ll help you create a better product.
- #1 Why is someone on this screen? The first question may provide the most insight into how we design a specific screen. The user may be… looking for an address on a mobile device, trouble shooting something in an FAQ section, or signing up for a news letter. What are they hoping to achieve? The goal here is to think about the specific use of each screen. We want to highlight the most important user needs. Once we know why someone will need a specific screen, we’re able to put that content in areas of the screen that make the most sense. This also comes in handy when reviewing deliverables with clients. Invested parties will ask why things are where they are or what the thinking was. Knowing why a person is on a screen helps you identify what they will need. And once you know what they need you have something concrete to stand on when discussing the designs. In most cases I’ve found the desire to add more and more features or content to a screen is caused by not understanding what the user needs are. When you don’t know why someone is on a particular screen It can be tempting to add things they MIGHT need, but really don’t. Those things often distract from the task you need them to complete. And I think you’ve heard me say this before… But a helpful metaphor is to consider a digital product as A single organism with small parts. Instead of multiple organisms with simple connections.
- So… why is someone on this screen? As an example of what look for when asking this question: Are they buying now? Are they Holiday shopping? Are they reading and making their Holiday list? All of these user scenarios have specific needs. Some more important than others.
- #2 How did the user get to this screen? The users point of entrance can be an important detail in determining page content. Also for understanding what the user expectations are. Offering relevant content to the user is one of the most effective tricks we have in our tool bag. Knowing how a user will likely navigate to a screen can tell you what they may expect to see. Did they arrive at this screen through a google ad or email campaign? Did they get there through a hidden menu in an application? Or was it through a primary navigation item?
- #3 What’s the next screen they’ll see? Are you sending users to a thank you screen after signing up for a newsletter? Or could inline validation be a better experience? A good example is a login screen. The website you’re working on may have many features that need explaining, but you can off-load them to the next screen. Bring focus to the most important login needs while the user is trying to complete that task.
- #4 What is the primary task the user should take on this screen? # 4, to me, is the most useful of the questions and the one I find myself using the most often. Defining the main action for each screen can provide a lot of bang for your buck. In some cases the answer to this question may be similar to the question #1: “Why is someone on this screen?” but the differences are important and very helpful. I work in advertising. Many of the interactive products we create tie into other efforts like email or social media campaigns. We may be trying to promote a give-away or get people to sign up for a news-letter, or follow them on facebook. etc etc Defining what action a user should take on a page is very useful when working on the layout of a screen. Getting this one right can be the difference in making the conversion or not. By conversion I mean any completed task by the user you wanted them to make. It may be a sale, a social media share or sign up etc… Not only that but It helps you prioritize secondary tasks and put them in areas of the screen that help the user complete their task.
- So… What is the primary task the user should take on this screen? This is a screen shot from one of my favorite ux sites goodui.org Here you can see an example of knowing what your primary task is and eliminating clutter can help focus on that action.
- So… What is the primary task the user should take on this screen? Here you can see an effort to repeat the primary action which is a great thing to do and can have positive impacts on conversion rates. But you have to know how to answer these questions to be able to plan for this.
- #5 What happens if a user doesn’t take the action? Not everybody wants to complete a dumb survey or sign up for a crappy newsletter. What then? Does the purpose of the screen fall apart or is it still helpful? This is where we plan our secondary actions.
- So… What happens if a user doesn’t take the action? An example is this best buy check out page where they are asking me to select a checkout method. best buy would prefer that i create an account. It would probably give me a better experience too. But maybe I don’t trust or know best buy somehow. Maybe I just don’t like creating accounts. You’ll noticed this scenario has been planed for by having a way to complete the purchase as a guest. It’s great that the business goal is for me to have a best buy account so they can spam my inbox with special offers. But it’s great for the user need to check out as guest.
- #6 Are there other actions that a user is being given that could be a distraction? In question 4 we determined the primary task and I mentioned that it helps prioritize secondary tasks. but this question aims to wrap up the loose ends. A campaign may be created… to increase email sign-ups, with a secondary CTA (Call To Action) for a free download and a tertiary CTA action of social follows. While it may be obvious how many actions a screen needs to meet the business goals, It’s harder to know how the presence of the other tasks distract from the primary. Thinking about whether other tasks distract from the primary task will help you create layouts to deal with this. This is also a problem that can be solved some in design by establishing visual hierarchy.
- So… Are there other actions that a user is being given that could be a distraction? in this example by Litmus, The business goal they have, is for me to sign up for the newsletter. <talk about the design> Clear headline Primary focus on the input field and the submit button has a lot of contrast Images of the newsletters also set good user expectations This landing page has a navigation that’s similar to their parent site navigation but slightly tailored to be more relevant to this particular page.
- So… Are there other actions that a user is being given that could be a distraction? Note the different navigation Sign up and pricing Features Resources Community Help Signin 6 items Where as the landing pages navigation was Sign up & Pricing Features Learning Help Signin 5 Items So they felt that Resources and Community could be distracting. And believed Learning would add value to the page.
- #7 How would they know what to do if it were their first time on this screen? This question is particularly helpful when working on websites. It’s important to keep in mind users don’t always enter your website through the home page. If a user ends up on a sub page but they’re unsure what the website is about, Do they have the tools to figure it out? What is on the page that can help them take a next step? What is the purpose of the screen? And if a user enters the experience here, with no previous information, are they able to take the desired action still?
- #8 What could be removed from this screen? (ask again) It’s really hard to remove things, and really easy to add them. When other voices get involved with an interactive product, it can be come difficult to keep a screen focused on its purpose. This is generally a problem of not being confident in what the screens purpose is. To deal with the uncertainty of its purpose, we add features to plan for other user scenarios. Which is great, until you add too many and it has negative impact on the primary task. Removing things that aren’t relevant or timely… helps bring focus that user and helps conversion rates.
- #9 Can you map each feature on this page back to a goal or need of a user? This is similar to question 8 in that it’s purpose is to bring focus and better define purpose. reframing the question like this however forces you to evaluate everything on the page a little more strictly. In many cases I skip this question and it’s ok to do that if a question doesn’t quite fit into your project.
- #10 What role does this screen play in fulfilling the value proposition to the user? Is the screen a checkout page in a shopping cart? or a payment page? Both have different needs in the same user journey but how meaningful and relevant the content is plays a huge role in users being able to check out and not become frustrated.
- So these 10 questions can guide you through Screen Design which is the second thing I wish I knew back in the day. Here’s the full list in case anybody missed one. To me, it’s a UX’ers job to keep people from becoming frustrated by interactive products. It may seem silly or trivial to be frustrated by UI or UX, but it happens all the time. These questions can help you find and eliminate the cause of these problems. Simply eliminating the chance for frustration goes a long way in helping you deliver good experiences.
- For continued learning these are some of my favorite UX related sites. Adaptive Path has an iPad app that had free UX training videos and lectures in it I believe. GoodUI.org is one of my favorite UX sites. You saw 2 screen shots earlier. Smashing Mag is a must. Sign up for their newsletter. And Sarah Doody for the 10 questions Tweet me for the Sarah Doody PDF link http://femgineer.com/freebies/Worksheet%20-%20Thinking%20Beyond%20The%20Screen.pdf
- And if we have time we can do Q&A If you’re starving we can break!
- Thank You! Message me on twitter if you would like @DigitalSkraps