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. |
Recommend Blogs• UX Movement Archives
August 2016
Categories |