Most web pages follow a common set of sizes and layouts, which you'll recognise even if you aren't aware of them. For example, did you know that nine out of the top ten most popular websites in the world use a fixed-width, centre-aligned design? Maybe you should too. Our article on web page size and layout breaks down web design into simple concepts, and helps you decide on a format for your website. To understand what the individual elements of a page are for, and why you need them, read our anatomy of a web page.
6 Steps: How to Plan a Successful Website RedesignPosted on Aug 14, 2014 | David Hildahl The first of five blog posts about what we learned while redesigning our own website. Talk about pressure. We just got done working with the most demanding client ever. Don’t feel sorry for us just yet: The client was Far Reach. And the project was redesigning our own website. Designing a website is a big deal for any organization. The stakes are even higher when you’re a web developer, who’s developing a website, whose purpose is to market website development. You may be surprised to learn we faced many of the same challenges that you might with a website redesign:
How did we do it? We treated ourselves like a client rather than coworkers. That means we followed the same time-tested process we recommend to clients. We adhered to these six steps for planning a successful website redesign:
We asked ourselves:
We chose to focus our website on those most critical to our bottom-line:
Our objectives—how we planned to accomplish it—fell into three categories:
So our web team created a new sitemap using the following steps:
Step 4. Request an estimate.Just like we would for a client project, we asked our staff to estimate their hours for:
Step 5. Set a budget.You might think a tech company would have an unlimited number of hours to develop its own website. Not so—even we had to set a budget for ourselves. After all, we needed to balance working on our own website with working on projects for paying clients. The estimate was presented to the partners, the partners set the budget—the number of hours we would devote to the project—and we planned to stick to it. The budget determined how many bells and whistles the website could have. So while there was room in the budget for a cool HTML 5 video on the homepage, we had to skip some extra features on the blog. Step 6. Define roles and responsibilities.It’s easy to get too many cooks in the kitchen. So it was important to define roles and responsibilities—specifically, choosing a point person and a decision-maker. The marketing strategist, Megan, was assigned to be the point person. If there were any questions, she provided the answers. That streamlined the process and helped us avoid any confusion. One of the partners, Kate, was empowered to be the decision-maker. She was responsible for getting the other partners to approve each part of the project, i.e., signing off on the sitemap, design, and final website. If there was any disagreement, she weighed varied opinions and made the final call. That completed the planning phase. Next up--content strategy and design. 30 ESSENTIAL UX TOOLS
BY LUDMILA PASOL · RESOURCES · AUG 21, 2013 When developers build websites, they often focus on the layout and technical features but neglect one very important aspect — how the user experiences the site. If users have a hard time figuring out how to accomplish their goals, they will look elsewhere and not come back. A pleasant user experience, on the other hand, can create a favorable and lasting impression that differentiates a site from its competition. This is why it is so important to carefully consider what users experience when they visit your website. You have to ask yourself: Does this page provide the information the user expects? As with many things, the tiniest details can make the biggest difference in the user’s experience. In this post, I’ll introduce 30 excellent tools and services for creating websites with better usability. MIND MAPS, FLOW CHARTS AND SITEMAPSThe foundation of a usable website is a good plan. If you don’t have a basic idea of where your project is headed, it’s unlikely you’ll arrive at the right place. Mind maps, flow charts, and sitemaps are effective tools for creating the diagrams you need. Mind maps are great for generating and organizing ideas, while flow charts help visualize and plan the steps in a process. Sitemaps can be used to identify the navigation structure of a website. Here are some applications that can assist you with these tasks: XMind (from free)XMind is an open-source mind mapping program for Windows, Mac OS X, and Linux. ConceptDraw Office (from $199) A powerful diagramming tool, ConceptDraw Office provides support for flowcharts and mind maps on Windows and Mac. OmniGraffle ($69.99) Mac OS X and iPad users can choose OmniGraffle to create flow charts, organizational charts, and many other types of diagrams. Gliffy (from free) Gliffy is a web-based diagram application with support for flow charts and sitemaps. WIREFRAMES AND PROTOTYPESBefore the actual coding begins, it often makes sense to do some prototyping. Prototypes allow you to play with different ideas and uncover possible issues without investing much time in coding and design. You can start with low-fidelity wireframes in grayscale and later create visual mockups and high-fidelity functional prototypes. PowerMockup (from $59.99)Use PowerMockup to create wireframes with PowerPoint. Pencil (free) Available on several platforms, this open-source software provides GUI prototyping. Mogups (from $9/month) Moqups is an online wireframing and mockup tool. Justinmind Prototyper (from $19/month) This application for wireframing web and mobile apps runs on Windows and Mac OS X. FileSquare (from free) FileSquare is a web-based tool for creating click-through prototypes by linking together uploaded mockup images. Handcraft (from $19/month) Handcraft is a collaborative HTML/CSS/JavaScript prototyping tool. USER TESTING AND FEEDBACKOnce you have something concrete to show, you should get it out in front of actual users, gather feedback, and act upon it. The applications and services listed below help you perform usability tests and organize user feedback. IntuitionHQ (from free)This remote usability testing service allows you to run various user tests on your designs and get instant feedback. Verify (from $19/month) This online application collects and analyzes user feedback on screens and mockups. Polldaddy (from free) Polldaddy is a web application for creating and publishing surveys and polls. Concept Feedback (free) Visit this online community to exchange feedback on designs. Fivesecondtest (from free) This service gathers feedback by asking users to recall the elements of a website after having seen it for only five seconds. PickFu (from $20) This crowdsourcing service provides quick feedback via simple A/B polls. UserTesting (from $49) UserTesting lets you “look over the shoulders” of people browsing your website. UsabilityTools (from $39/month) This collection of tools offers user research including surveys, card sorting, and feedback forms. Morae (from $402 approx.) This desktop software records user interactions (keyboard/mouse input, eye-tracking, audio, etc.) and analyzes the results. BugHerd (from $29/month) BugHerd is an online bug tracker specially designed for web development projects. A/B SPLIT TESTSA/B testing is simple: You create two variations (A and B) of a page and then determine which one produces better results measured in terms of purchases, newsletter sign-ups, or other factors you value, which reflect a better user experience. These two services can help you with that: Optimizely (from $17/month)This A/B split testing tool can help you find the most effective way to increase conversions on your website. Visual Website Optimizer (from free) Like Optimizely, Visual Website Optimizer provides support for A/B testing, multivariate testing, behavior targeting, and more. ANALYTICSWeb analytics provide valuable insights into how people use your website. They can tell you how visitors typically navigate through the website, how long they stay on each page, when they leave the site, and much more. This information can be extremely helpful for identifying usability problems and their causes. Crazy Egg (from $9/month)This web analytics service visualizes user behavior with heat maps, scroll maps, and confetti reports. Inspectlet (from free) Another web analytics tool, Inspectlet provides heat maps, real-time analytics, and screen recordings of visitor behavior. Mixpanel (from free) Mixpanel is an analytics platform for tracking custom events in mobile and web applications. VALIDATION, LINK CHECKS AND SPEED TESTSFor a positive user experience it’s also important that the technical side of a website works as intended. Nothing is more frustrating than links pointing to non-existant pages, websites taking forever to load, or broken pages because of HTML and JavaScript errors. W3C Markup Validation Service (free)This online service checks to determine whether the code of a web page is valid (X)HTML. Dr. Link Check (free) This web app checks a site for broken and blacklisted links. Pingdom Full Page Test (free) Use this tool to test and analyze how long it takes your webpage to load. Google PageSpeed (free) This Google service analyzes a web page and makes suggestions for how to improve its load time. CrossBrowserTesting (from $29.95/month) This service provides virtual machines for testing a website in different browsers on different operating systems. http://uxdesign.cc/ux-tools/
What are the UX Design Tools you use to materialize and communicate your design ideas?What are the best tools for wireframing, prototyping, user testing, or simply just managing your design activities? We usually prefer tools that are unexpensive (ok, everyone does), that do not require software installation (browser-based tools) and that provide us with a good user experience when we're projecting experiences for other people. After all, that's how we spend a big part of the day. 1. Our favorite wireframing and prototyping tools: UX Pin Wide range of functionalities, including the ability to create responsive clickable prototypes on your browser. Wireframe.cc Open a new tab, create quick and dirty wireframes, and that's it. Speed over pixel perfection. Pixate A great tool to test out complex mobile interactions, animations and transitions. Sketch A simple and efficient UI design tool with a strong community around it, taking over Fireworks aficionados' hearts. InVision Upload jpgs and link them through to create clickable mockups and get feedback from your team and users. P.O.P. app Sketch your mobile UI on paper, take pictures with your phone and add links to simulate your mobile app. Axure The most complete wireframing and protoyping software in the market. The Photoshop of UX Designers. Paper sketches Never underestimate the power of pencil and paper. Fast, effortless and collaborative. Here are some templates. 1.1 Additional tools: Flinto "Flinto strikes the perfect balance between fast prototyping and realism. Prototypes run on iPhone or iPad and can be shared with anyone." Protoskecth "With Protosketch from UI Stencils, your sketches become real, interactive prototypes that help you tell the whole story behind your great idea." Mockups.me "Mockups.me lets you rapidly create interactive wireframes of your apps on your tablet." Appery "The only cloud-based platform with visual development tools and integrated backend services." Realizer App "The Realizer lets you create your very own presentation prototypes of iPhone and iPad apps." Framer JS "A prototyping tool for animation and interaction on desktop and mobile." Easel "Design & build in your browser. (It's the fastest way to ship.)" Moqups "Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them." Keynote Kung Fu "Use Keynote to create wireframes and clickable prototypes for the web and mobile devices." AppSketcher "Build interactive prototypes quickly with HTML and jQuery components. No coding required." HotGloo "What if there was a tool to create wireframes AND prototypes?" FlairBuilder "FlairBuilder is a prototyping tool that lets you create interactive wireframes for websites and mobile applications." Macaw "Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS." Pencil Project "An open-source GUI prototyping tool that's available for ALL platforms." Concept.ly "Transform your Mockups into clickable applications." MockingBird "An online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application." Mockflow "Super-easy Wireframing. Design, collaborate user interface concepts for your software and websites." Balsamiq "Balsamiq is a small group of passionate individuals who believe work should be fun and that life's too short for bad software." OmniGraffle "OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they're moved." Proto.io "Fully-interactive high-fidelity prototypes that look and work exactly like your app should" Fluid "Create interactive prototypes and wireframes of Android, iOS and Windows 8 apps." Composite "A brand new way of creating interactive prototypes that automatically connects to your Photoshop® documents." 2. Our favorite user research and testing tools: Wufoo Create any kind of online survey that you need. Very complete and easy to analyze results. TypeForm "Say goodbye to boring online surveys". Simple, elegant, responsive and user-friendly forms. User Testing In less than an hour you can run an unmoderated user test in your website with a predefined user base. Useful for testing short tasks. Verify App Upload your design and quickly test where users would click. See and share clear and actionable reports after test. Usabilla Collect feedback from your users through a plugin that can be easily installed on your website. Morae Capture audio, on-screen activity, keyboard and mouse inputs as you are appyling user tests (sofware). UX Recorder Record your user's actions and reactions using the front camera of your smartphone during mobile tests. Google Hangouts Doing remote usability tests? Share your screen and see users reactions as they interact with your UI. 2.1 CREATE ONLINE SURVEYS PollDaddy SurveyGizmo SurveyMonkey 2.2 CAPTURE IN-SITE FEEDBACK WebNotes Concept Feedback LiveChat Hotjar Frelay iPerceptions Kampyle Qualaroo UserVoice 2.3 RECRUITING USERS Clarity PivotPlanet Ethnio 2.4 TEST LAYOUTS REMOTELY Intuition HQ Usability Hub UsersThink Chalkmark Usability Tools 2.5 RECORD YOUR USERS SilverBack 2.0 Delight.io MagiTest What Users Do Camtasia Jing Try my UI 3. Our favorite tools for organizing information: Lucid Chart Easily create diagrams with lines that connect automatically. The Google Apps integration makes it even more collaborative. MindMeister Organize information by creating beautiful maps that connect words, images and links together. Coggle.it Map out words and concepts to help you out during brainstorm sessions. Free, easy-to-use and beautiful. Optimal Sort Send a link to your users and ask them to organize information in existing categories or even create new ones. 3.1 Additional tools: CARDSORTINGConcept Codify "Brighten your user experience with the easiest online card sorting tool." WebSort "WebSort enables you to conduct remote card sorting online. Create a study, send a link to participants, and analyze the results - all through a simple web-based interface." Simple Card Sort "Simple Card Sort has a rich set of features including subgroups, and participant replay. Two features you'll find no where else." Xsort "xSort is a free card sorting application for Mac OS X aimed at user experience professionals and social scientists." 3.2 DIAGRAMS / SITEMAPS Gliffy "Professional-quality flowcharts, diagrams, floor plans, technical drawings and more." Lovely Charts "Lovely Charts is a diagramming application that allows you to create professional looking diagrams of all kinds." Creately "Create diagrams of all kinds on your desktop and the Internet, and work from both online and offline" Google Drawings "With Google drawings you can easily create, share, and edit drawings online." Draw.io "Draw.io is an online diagramming application built using the mxGraph JavaScript library." 3.3 MIND MAPPING Xmind "Most Popular Mind Mapping Tool Millions of people use XMind to clarify thinking, manage complex information, run brainstorming and get work organized." Mind Node "The quintessential mind mapping experience, Mindnode makes it easy to brainstorm and organize your thoughts, so you can focus on your ideas." Mindjet "Work Inspired. Mindset ProjectDirector is a virtual whiteboard, collaboration & project management suite for everyone on your team." 4. Our favorite analytics and metrics tools: Crazy Egg One of the simplest and most affordable heatmap tools we've ever heard of. Good Data Cloud-based B.I. solution that can provide useful reports combining multiple data sources. KISSmetrics A great analytics tool to create funnels and reports based on customer behavior in your website. Easy to set up and use. Mix Panel Analytics tool to measure engagement and customer retention. UI is great and they offer free plans. 4.1 Additional tools: Google Analytics Live Person Myna Web HiConversion Tableau Maxymiser App Annie Flurry Domo Woopra Quantcast Piwik Clicky Segment Attention Wizard Click Density Click Tale Inspectlet Our favorite tools for other daily tasks: Redpen.io Drag and drop a jpg and quickly send a link to other designers to get comments and feedback. Iceber.gs Create and organize your personal library of references and ideas. The browser-based (and flat) Evernote. Asana A communication and task management tool for small teams that need to collaborate seamlessly. Codepen.io Quick and streamlined notepad tool for designers who like to play with HTML, CSS and JS. UX Archive Compare mobile user flows divided by category. Google Drive Docs, spreadsheets and presentations. No more MS Office. Makesets Create a collaborative list of links organized by theme. QuickCast.io Quickly record your screen and share a video. Patterntap UI references to inspire your creativity. Trello Project management for agile development and the cool kids. Prezi A different way of presenting your work. Use with caution. MozBar Browser extension to check the status of your site's SEO. Over the past six years I have had the opportunity to review hundreds of candidates as part of my effort to build solid design teams at two different companies. For each offer these companies have extended, I conducted in-person interviews with three or four candidates selected from a pool of seven or eight individuals who made it to the phone screen stage, out of a larger pool of thirty to forty who submitted resumes. As these numbers demonstrate, it takes significant vetting to get to the onsite interview stage. Unfortunately, many highly qualified candidates who make it to the final phase are unable to navigate it effectively.
The goal of this article is to help candidates understand the inner workings of an onsite interview so they can position themselves for success. Congratulations…What Next?It takes a lot to be invited to an onsite interview, so congratulate yourself when you get to that stage, but also be prepared to handle the rigors of the process. An onsite interview can last up to six hours and be very demanding. Most Silicon Valley design organizations follow a structured process with three main parts. Typically, an interview begins with a portfolio review, which gives the candidate an opportunity to present his or her body of work. Next comes some type of design exercise to test the candidate’s design thinking chops. The day culminates with face-to-face interviews with key stakeholders. There is already quite a bit written about one-on-one interviews, and my goal is not to repeat points others have already made. Instead, I will focus on the two design-related phases of an onsite interview: the presentation of a portfolio and the design exercise. Portfolio PresentationI firmly believe that a designer is only as good as his or her portfolio, because creating a good portfolio is a design problem in itself. In essence, you are trying to satisfy the needs of various stakeholders while establishing your brand and credibility. The biggest advantage for a candidate during an onsite interview is being able to control the tempo as well as the storytelling of their work. However, I have seen many candidates unable to understand the power of having a room full of attendees who are waiting to hear their story. This impression is the most important of the day, and oftentimes makes or breaks the rest of the interview. Based on my experience, candidates interviewing for a design role should follow what I call the “4P” structure of portfolio presentation: Person, Projects, Philosophy, and Process. PersonThe biggest investment an organization makes when hiring is in the person it hires. It is therefore critical for candidates to open up about who they are during an interview. I have seen a wide range of approaches to doing this, from candidates showing collages of their travel pictures to someone who connected their passion for fly-fishing to design. A good design team is one that has diverse interests and backgrounds, but a common goal. Unfortunately, I have seen many candidates who jump directly into sharing project details, not recognizing the need to say something interesting about themselves, that would allow the audience to relate to them. Design is about empathy, and this is just as true for the interview process. ProjectsProjects typically comprise the bulk of your portfolio presentation, often taking more than half the time allocated. The best project reviews are those in which a candidate leads an interesting and informative tour of their work, revealing both the breadth and depth of his or her experience. While putting together the project section of a portfolio presentation, consider the following guidelines: 1. Use a “T” strategy. Provide a broad introduction to everything, and then deliver in-depth reviews of a couple of projects. 2. When choosing projects to review in detail, pick those that are relevant to your audience. 3. Devote ten to fifteen minutes to each of these projects, and communicate the following:
Therefore, each candidate should clearly lay out his or her design philosophy during an interview. Doing so will enable the hiring manager to make a decision that is right for the candidate and the team. ProcessGood design is enabled or hindered by the combined action of three factors: individuals, environment, and time. In organizations where design is competing with other priorities, good process can help designers overcome shortcomings in any or all of these areas. During interviews, candidates should share examples highlighting their command of good design process. They should showcase their ability to deal with challenges that suddenly emerge, during which resources are in short supply. For example, if someone was the first hire on a team and helped build a design thinking culture within that team, he or she should feature this. Other examples might include a candidate’s contributions to a team’s design standards, design reviews, and crafting hiring processes. Design ExerciseMore and more companies give design candidates a design exercise to complete during the on-site interview to see how they think on their feet and handle themselves under pressure. The most common approach seems to be the one we use: a design problem is provided to the candidate right after the portfolio review, then he or she is given forty-five minutes before the hiring panel shows up for the debrief. Some organizations may ask candidates to come prepared with a solution to a design problem that’s given to them beforehand. The problems themselves run the gamut from the fantastic (“How would you design a time machine?”) to the very specific (“How would you design the checkout flow for ABC company?”). In some cases, the assigned problem is an actual problem the team is currently tackling. In others, a hypothetical problem is provided. When it comes to the debrief, I suggest candidates adhere to the following guidelines: 1. State the problem. I’ve observed that the candidate and the hiring panel don’t always have the same interpretation of the design problem at hand. That’s why, at the start of the debrief, you should describe what you think the problem is so that everyone can understand why you’ve chosen a particular solution. 2. Provide general thoughts. It’s often worthwhile to provide your general thoughts on the design problem, state where you see opportunities and what issues you’ve identified, and clarify any assumptions that you think are reasonable to make. This will enable the audience to relate to your thought process. 3. Focus. Often candidates get overwhelmed by the opportunities presented by a problem. For the purpose of the exercise, it’s best to identify one or two that are worth focusing on. 4. Show, don’t tell. Make sure that you lead the panel through the entire design process, and leverage design artifacts such as workflows, sketches, and concepts. Unfortunately, I have seen many designers merely describe their solutions, thus causing their audience to lose interest. 5. Reflect. As in any design discussion, new constraints will emerge by the minute. When presented with a new constraint, demonstrate that you can deal with on-the-fly changes, and give a thoughtful explanation of how you’d account for it. ConclusionThere are many ways to plan and prepare for an onsite interview. My suggested approach will, I hope, be useful to many candidates. I encourage you to modify it as you see fit. Whatever approach you take, be prepared to tell your story using visually interesting artifacts to make your points. And do let me know how it goes. Good luck! Advertisement Usability and interaction design are fields that are becoming more and more important for every design. Both fields consider the interactions between the user and a system; accordingly, it also applies to the interaction between users and web-sites. A product has more chances to be successful if it’s design makes emphasis on usability. Making a website easy to use and easy to understand has direct economical impact as, for example, it guides the users across the sites, helps user to successfully sign up for a service or to complete a checkout process. We have selected excellent books about usability and interaction design, some provide the theory of user interface design, others have a number of precise examples of how the theory can be used in practice. All these books are prestigious, well-known and recommended by experts. They include the origins of user-friendly products, creation of personas, goal-directed design, information on how to conduct usability tests and much more. Images are, as always, clickable and lead to the sites which have more information about the books. 10 Usability and Interaction Design Books1. About Face 3. The Essentials of Interaction Design by Alan Cooper, Robert Reimann and David Cronin ISBN: 978-0470084113 Alan Cooper is a professional designer, specialized on software design, and all his knowledge is represented in this book. He makes emphasis on Goal-Directed Design, meaning that goals, not features, are the key to the product success. This technique is based on the use of personas and scenarios to conduct user research. Goals are explained in three categories, experience goals, end goals and life goals. This master piece has mostly theory but it also includes very good examples. 2. Prioritizing Web Usability by Jakob Nielsen, Hoa Loranger ISBN: 978-0321350312 Jakob Nielsen, the maestro of Web usability, has been writing about usability since 1995. Nielsen and Loranger work at the Nielsen Norman Group. The book presents a good combination of theory and practical examples. It has clear, useful tips and well-documented “Dos & Don’ts”. As the title indicates, this book has been written considering the Usability from the practical point of view. 3. Designing the Obvious. A Common Sense Approach to Web Application Design by Robert Hoekman, Jr. ISBN: 978-0321453457 This is a small guide focused on web-site usability and web-based application usability. The entire book consists of precise concepts and examples. This heavily graphical and illustrated book could be a first introduction for web developers who are interested in this topic. Among covered subjects are building only whats necessary, preventing and handling errors, and designing for the activity. Supporting the user mental model is one of the most interesting concepts where the author proposes to consider designs from the user-centric point of view. 4. Don’t Make Me Think. A Common Sense Approach to Web Usability by Steve Krug ISBN: 978-0321344755 Don’t Make Me Think is already the must-read book when it comes to Web usability. It has a number of colorful and humorous examples, including nice cartoons that deliver the message and bring the important observation from real life in the foreground. This relatively small book has the necessary basics, being a recommended first usability read for web designers. Steve Krug does a great work explaining his Laws of Usability, for example to “get rid of half the words on each page, then get rid of half of what’s left”. 5. The Design of Sites. Patterns for Creating Winning Web Sites by Douglas Van Duyne, James Landay, Jason Hong. ISBN: 978-0131345553 The Design of Sites is a toolbox for every web-designer that wants to inspect and studyusability and interaction design patterns. It is basically an excellent reference book with very good concise examples. The authors have divided the book in a collection of design patterns, giving clear hints and examples on how and when to use each of them. 6. The Design of Everyday Things by Donald A. Norman ISBN: 978-0465067107 Published many years ago, this book is already a usability legend. Norman writes about the importance of the user-centered design and how this concept can be applied to design of everything. Memorable chapters include “Design for Error”, “Simplify the Structure of Tasks” and “When All Else Fails, Standardize”. Donald Norman is one of the founders of the well known Nielsen Norman Group, pioneers in usability and user-centered design. 7. Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell ISBN: 978-0596008031 Designing Interfaces delivers what a book from O’Reilly usually offers, good content and quality printing. This book has well-illustrated examples on web applications, desktop software and mobile devices organized according to user interface patterns, each containing practical advices. A kind of “read it from beginning to end”, this book provides solutions for each problem a user interface could have. 8. Designing for Interaction: Creating Smart Applications and Clever Devices by Dan Saffer ISBN: 978-0321432063 Designing for Interaction provides examples, patterns and guidelines for interaction design on the Web as well as suggestions for software applications and different electronic devices. Dan Saffer himself was working as a creative leader and interaction designer which is clearly illustrated in the way this book is written. Particular and unique are the short and clear real design case studies and the interviews with professional designers. 9. Designing Interactions by Bill Moggridge ISBN: 978-0262134743 This book describes the origins of interaction design. Every chapter introduces the creation and development of successfully designed products, for example the mouse, the Mac, The Sims and the iPod. Interviews include the founders of Google, Larry Page and Sergey Brin, and Doug Engelbart and Bill Atkinson, involved in the creation of the mouse and desktop.Designing Interactions comes with a DVD containing interviews worth watching. 10. Envisioning Information by Edward R. Tufte ISBN: 978-0961392116 Tufte’s books, and specially Envisioning Information, are the essential reads for every person trying to get a better understanding of usability and interaction design. In this book, the author explores different ways of visualizing data. The book has many colorful examples of good and bad data visualization with graphs, maps and charts. The book itself is beautifully printed and comfortable to read. Although it does not provide any examples on website design this book represents the basis of this science. Alexis Brion is an interaction designer specialized in usability for the Web. He is the director of Design vs Art Design Agency and writes on usability, interaction and web design at the Design vs Art Blog. Editor’s PickThere are few more books we’ve come across over the last years. The ones listed below turned out to be life-savers and provided useful insights into the field of user interface design. The bottleneck is, however, that some of them aren’t that easy to read and require both patience and some prior knowledge in the field of HCI. 11. Interaction Design: Beyond Human-Computer Interaction by Jenny Preece, Yvonne Rogers and Helen Shar ISBN: 978-0471492788 Interaction Design from the academic point of view. This book comprises 15 densely packed chapters that integrate all of the various cognitive, social, and other issues that are germane to interaction design. The book provides a comprehensive look at the entire set of requirements involved with design. The authors show that there is much more to systems design than end-user requirements and CGI scripts. Effective HCI is a multi-disciplinary area including psychology, sociology, anthropology, information systems, and computer science. Highly recommendable for more advanced and sophisticated insights into the area of interaction design. 12. The Humane Interface: New Directions for Designing Interactive Systems by Jef Raskin ISBN: 978-0201379372 “The book that explains why you really hate computers.” This book is sometimes quite hard to read and not that easy to understand as the author literally dives in into the cognitive nature of human beings. However the book is very appealing and thought-provoking. Falling somewhere between Norman’s The Psychology of Everyday Things and Shneiderman’s Designing the User Interface, Raskin’s book covers ergonomics as well as quantification, evaluation, and navigation. Raskin was the original creator of the Apple Macintosh project before Steve Jobs took over and has a background in technology and art, which gives him a unique perspective on usability. 13. Designing the User Interface: Strategies for Effective Human-Computer Interaction by Ben Shneiderman, Catherine Plaisant ISBN: 978-0321269782 This book, which is often considered as “the bible of UI”, provides a comprehensive introduction to the field of human-computer interaction. Struggling through sometimes rather complex choice of words, you learn practical principles and guidelines needed to develop high quality interface designs — ones that users can understand, predict, and control. It covers theoretical foundations, and design processes such as expert reviews and usability testing. The book contains numerous examples of direct manipulation, menu selection, and form fill-in: chapters have examples from cell phones, consumer electronics, desktop displays, and Web interfaces. 14. Thoughtful Interaction Design: A Design Perspective on Information Technology by Jonas Löwgren, Erik Stolterman ISBN: 78-0262122719 The authors of Thoughtful Interaction Design go beyond the usual technical concerns of usability and usefulness to consider interaction design from a design perspective. The shaping of digital artifacts is a design process that influences the form and functions of workplaces, schools, communication, and culture; the successful interaction designer must use both ethical and aesthetic judgment to create designs that are appropriate to a given environment. This book is not a how-to manual, but a collection of tools for thought about interaction design. Fixing technical issues on mobile is annoying. That's why we've teamed up with Peter-Paul Koch to create The Mobile Web Handbook, a new practical guide to deal with common front-end challenges on mobile, effectively. Get the book now. The Web has entered an era of user-centricity. If businesses are to attract new customers and retain existing ones, they must create websites and apps that deliver intuitive and tailored experiences. Whether you run an online retailer or a not-for-profit community website, the user experience is mission critical.
As a consequence, we have seen a real surge in the need for talented user experience (UX) designers who can help turn vision into reality. How do you attract, recruit and retain UX talent in your business? (Image credit: openwourceway) If you are anything like us, you’ll be keen to learn from leaders and innovators in our industry, which is why we’ve assembled some luminaries from the UX community to share their insight and experience especially with the Smashing Magazine community. We’d like to say a big thank you to the experts who made this guide possible. They all have a unique perspective on UX, and their work intersects with it in very different ways.
THE QUESTIONS
Many of the experts I spoke with continually develop and hone their hiring skills, but their advice hinges on three principles. FIND A ROLE MODELTom Wood of Foolproof: “My role model is David Ogilvy. He had a really clear and public view about the qualities he looked for in the people he hired. His quote, ‘If we each hire people smaller than us, we will become a company of dwarfs, but if we each hire those larger than ourselves, we will become a company of giants,’ is a call for everyone in a position to make a point to step up and challenge themselves through the quality of people they hire.” Martin Belam of The Guardian: “I’ve been on a lot of interview panels through the years and picked up techniques from people such as Mags Hanley, Lorna Leddon and Karen Loasby.” LEARN FROM THE EXPERIENCES AND MISTAKES OF OTHERSJustin Cooke of Fortune Cookie: “Like everything we do at Fortune Cookie, we have never stopped trying to improve our recruitment process. This was achieved by learning from mistakes, through experience and from others particularly asking recruitment agencies and candidates for feedback on how we could be better.” FIND YOUR FEETUltimately, you need to blaze your own hiring trail and go with your instinct. As Kara Pernice of the Nielsen Norman Group emphasizes, “Asking advice from other people who have successfully hired behooves you, but there is nothing like experience.” Peter Merholz of Adaptive Path says, “I rely a lot on intuition, which has proven mostly successful.” 2. Do You Hire With Your Head Or Your Heart?Logic and instinct both have their place in the hiring process, and the decision will nearly always be made partly with your head and partly with your heart. You will likely use your head to determine whether the candidate has the requisite skills, experience and attributes. And then to a certain extent you need to follow your heart and your instinct in deciding whether a candidate is a good fit for your culture. The experts I spoke with validated this idea, explaining that they initially look at hiring from a rational point of view. Justin Cooke: “At the first stage we look for the rational, but the ultimate decision has to be based on an emotional connection.” Peter Merholz sums this up perfectly: “I would say the head is the initial barrier — if I can’t rationalize the hiring decision, then it won’t go anywhere. But after the head makes a decision, the heart plays a part, particularly in thinking about ‘softer’ matters, like personality and cultural fit.” Stu and Odette: “It’s a balance of finding a person with the right attitude and personality, twinned with skills needed to do the actual job.” Kara Pernice: “Both, but you have to know you can deal well with each other. And I usually get that feeling from my gut rather than my brain.” Ultimately, the final decision comes from your head because, as Tom Wood explains, “If you make a mistake with hiring in a small or medium-sized business, you can cause real problems for yourself.” 3. In A Sentence, What Makes For A Great UX Designer?If you don’t know what you are looking for, you will never know when you’ve found it. Nowhere is this philosophy truer than with hiring. A real appreciation not only of what makes a superb UX designer but of what kind of person you are looking for is essential if you are to recruit successfully. What makes a great UX designer is, of course, a matter of opinion, but there is a consensus that a UX designer must, in the words of Martin Belam, “make good stuff and make stuff good.” They must have an ability to interpret and empathize with the user, to simplify the process and to execute a design solution. Peter Merholz: “An ability to take an empathetic view of the user, and to interpret that into a systematic design solution.” Justin Cooke: “Someone who can make the complex simple, beautiful and ever so slightly fun.” Stu and Odette: “Someone with the passion and curiosity to constantly learn more about how people interact with digital products.” Kara Pernice: “Great UX designers have a desire to innovate and gather knowledge about potential users and customers, and the humility to know that their first design iterations will rarely be great.” Tom Wood: “The willingness to collaborate with both the end user and the business client during the design process.” 4. How Do You Advertise UX Positions In Your Company?There is a clear shift in the way UX roles are being advertised, in line with the increasingly social nature of the Web. Interestingly, Stu and Odette still succeed in finding candidates through specialist recruitment agencies, despite the perceived decrease in their popularity. Here’s how our panelists fill their UX vacancies. Tom Wood: “Our site, amplified by Twitter and LinkedIn activity.” Kara Pernice: “We have the luxury of having our boss write a newsletter that reaches many UX professionals, so that is our biggest marketing tool when hiring. It works for us because people who read the newsletter have a sense of what we are about.” Peter Merholz: “We have our ‘Work with us’ page on adaptivepath.com, and then we reach out through various channels to spread the word: Twitter, our blog, LinkedIn, UX industry mailing lists.” Martin Belam: “We have our own recruitment portal site, and I usually tweet and blog in a personal capacity to help drum up candidates.” Justin Cooke: “On the Fortune Cookie website, on LinkedIn, on totaljobs.com, on industry websites like Econsultancy and BIMA, at events and conferences, and through our employees, who receive a bounty to anyone they recommend who we hire.” Stu and Odette: “UX Jobs Board and specialist recruitment consultancies.” 5. What One Question Do You Ask Every Candidate?One thing that is universally agreed on is that there is no “right” way to interview someone, so I asked this question of our experts to see if we could at least draw out common themes. Martin Belam asks of candidates, “Can you describe to me a project that when badly wrong. Why did it go wrong, and what did you personally learn from it?” Failure is a topic that is all too often avoided in interviews, but a question like this helps the interviewer understand how a candidate copes with failure — failure being inevitable in any career. It helps you determine whether they are capable of humility and also to see how they have professionally developed as a result of failure. This seemingly innocent question can tell the interviewer a great deal about the candidate. Justin Cooke: “What is the most amazing thing you have seen on the Internet this month?” Justin’s is a great question to ask because it helps you understand if the candidate is as passionate as they say they are. (Do they keep up with the latest trends, or do they just say they do?) It also helps you to see the kinds of things that they get excited about; the question might just reveal whether the individual is a good cultural fit for your team and the kinds of projects you do. Peter Merholz: “What is the thing that gets you out of bed every day and wanting to do this kind of work?” As an interviewer, you undoubtedly want to understand the motivations of the person you are speaking with. After all, motivation is the key to a happy, productive workforce. That being said, if you flat out ask a person what motivates them, they’ll probably lie to you with the usual interview spiel about their satisfaction in doing a good job. Asking someone what gets them out of bed every morning is a roundabout way of asking the same thing, but you’ll catch the individual on the hop, and they’ll probably give you a more honest answer than had you asked what motivates them. Finally, Tom Wood always asks people about their ambitions, “to see if they will push themselves — and us.” This is a superb question and allows you to determine whether the person has planned their professional life in the near and long term or are just plodding. 6. Do You Have A Particular Method Of Assessing Candidates?Assessing a candidate’s suitability for a job is certainly one of the most, if not the most, challenging aspects of hiring, so understanding how the best in the business do it is helpful. Some clearly like to go the practical route and judge a candidate by assigning them a task during or following the interview. Justin Cooke says, “Nothing beats setting a task. The output is always fascinating.” Kara Pernice allows candidates to do most of the talking and gives them simulations to perform, “such as, give a short presentation and send us the video. This can’t truly demonstrate how they would do, but it’s a start. Sometimes we agree with a candidate to first test the waters by hiring them on a contract basis or as an intern. If we are all happy and still interested in the end, we hire them.” Peter Merholz, Martin Belam and Stu and Odette feel that the process is fairly simple and that a candidate can be assessed based on their credentials and personality. Peter Merholz says, “It’s pretty straightforward: do they have the practitioner chops (across strategy, research and design), and do they have the right personality and cultural fit?” Martin Belam adds, “I expect anyone in UX to have a significant online presence, and I’m always surprised if they don’t.” To anyone reading this who is seeking a career in UX, a strong online presence is definitely a prerequisite. 7. Do You Hire Based On Years Of Experience Or Achievements And Portfolio?I was surprised by the responses to this question. I assumed the quality of the portfolio would weigh more heavily every time, but that wasn’t the case. Tom Wood responds, “Of the two, experience is probably the one I favor most, simply because anyone can catch a break on the projects they work on and the results they get (success has a thousand fathers, after all). Because of the emphasis we place on working directly with clients and end users, there’s often no substitute for the life experience that makes you comfortable in the company of these groups.” However, Stu and Odette says, “The latter. You can get people who have been in the industry 10+ years and still haven’t produced good design work.” Peter Merholz adds that his company generally favors the portfolio, but “if we’re hiring for a more senior role, where things like client-management skills are crucial (and perhaps even more crucial than super-awesome design chops), then experience definitely is a factor.” Martin Belam supports this by saying, “I think in any team you need a mix of skills and experience. I enjoy mentoring people and bringing younger people into the profession, so I look more at what I think people will be capable of achieving and how they will go about it, rather than years of experience and qualifications.” Justin Cooke adopts a completely different approach, saying “Years of experience and portfolios are useful inputs and metrics, but we are more interested in a candidate’s answers to our questions and their response to the task that we set.” 8. How Do You Retain Talent?To someone outside of the UX community, talent retention might not seem like a critical issue, given the state of the economy and how many people are looking for work. But UX is a fiercely competitive market, with agencies and consultancies vying for the attention of the right UX folks. The level of attention given to talent retention by the people I spoke with is fascinating. Here are what seem to be the key factors in retaining the best UX designers. OPPORTUNITYKara Pernice: “We try to give people opportunities they are interested in.” SELF-ACTUALIZATIONTom Wood does it “by thinking every day about what motivates our people and making sure we do everything we can to help them realize their personal goals and ambitions. Beer also helps.” AUTONOMYPeter Merholz: “There is no UX consulting firm that allows the autonomy and freedom that Adaptive Path provides. Also, our commitment to sharing ideas, through writing, speaking and teaching, is unparalleled and attractive to our team.” PROFESSIONAL DEVELOPMENT AND WORLD-CLASS TRAININGJustin Cooke swears by “never saying no to a training request; employing brilliant leaders; listening to everyone’s ideas and auctioning them to make us a better agency; continually communicating how we are doing; starting at 10:00 am; tracking the market to ensure that our salary and benefits packages are among the best in the industry; and ensuring that we understand everyone’s career goal and mapping out a plan to make it a reality.” BREATHING ROOMStu and Odette: “We’re a pleasure to work with, and we only focus on a set number of projects, so as not to stretch people too far. The quality goes down if you do.” 9. What Kind Of Culture Do You Try To Create?This question follows on the last one, because culture is obviously central to talent retention, and there are clear crossovers between the answers to the previous question and how this filters down through the culture that these leaders are trying to promote. “Constellations are more interesting than individual stars.” This is the eloquent way in whichTom Wood describes the team culture he is trying to foster. Justin Cooke supports the notion of a team culture by adding, “We are aiming to create a passionate team that cares for each other and is 100% committed to improving the digital world to make the real world a better place.” Kara Pernice focuses more on the individual, describing the culture that she is trying to foster as being more autonomous, with “professionals producing high-quality, rigorous work that improves design for clients and UX professionals.” 10. What Skills Would You Like To See In More UX Designers?I was most looking forward to hearing the responses to this question, not only for the insight, but also because they will help job seekers hone their skills in the most sought after areas. The thing many of the experts seem to be looking for is holistic in nature — a well-roundedness more than particular design skills. CLIENT-FACING SKILLSTom Wood describes the need for more charming UX designers, who are “comfortable thinking in the same room as clients.” STRATEGIC THINKINGJustin Cooke looks for “a stronger understanding and awareness of the entire customer journey; a desire to improve the entire service rather than just the experience, and brilliant good storytelling.” Stu and Odette add, “The ability to pragmatically design for digital products, rather than being able to talk solely about UX in general. Our industry is suffering from too many talkers and not enough walkers.” RESEARCH ABILITYMartin Belam says, “I wish people would read more widely, and more about some of the traditional design skills.” FACILITATIONAccording to Peter Merholz (and I tend to agree here), “Facilitation skills are becoming increasingly crucial in our work; being able to coordinate cross-functional teams and get the most and best out of them.” SummaryUX is a hard skill to teach; no formal credentials are required, and no two career paths or job descriptions are the same. In fact, pinning down exactly what UX is can be difficult. It can mean different things to different people. Some UX design positions require only graphic design skills, others mainly planning and wireframing. Most, however, require a combination of design, planning, negotiation, conflict management, objectivity, leadership and openness. Above all, a good UX professional must have a natural appreciation of the human mind and be open to new attitudes and approaches and to exploring the impact of real people on the commercial environment around them. Recruiting and hiring great UX professionals can be both challenging and fun. Quite often, the “right” person will be wildly different from the person you initially expected, and skill, judgement and intuition are required to pick them out. One thing is for sure, though: UX skills are in high demand and short supply. It’s a candidate’s market, and companies need to try now more than ever to attract and retain the best minds in the field if they are to succeed online. |
Recommend Blogs• UX Movement Archives
August 2016
Categories |