7 Common Mistakes While User Testing

Users complete realistic tasks using your website or app, comment on their actions, moderators guide them, observers watch and listen, others take notes. That’s how a usability test is typically set up. Its purpose is to identify problems regarding the usability, find out how satisfied the participant is, and collect data for making informed design decisions. That’s in an ideal world… But even if you follow best practices like those found at usability.gov, there’s still a lot that can go wrong. Here are seven common mistakes during a usability test you shouldn’t make.

 

#1 Testing the user

The most important point at the beginning: You are testing the usability of your website or app – not the user! The participants of your test should be aware of that. Why? You want honest and reliable feedback, and the best way to get this is to make your testers feel at ease – at least as much as possible. They should behave as naturally as possible. After all, you are trying to get insights into real-life situations. Usability tests by their very nature put participants in an artificial and often slightly uncomfortable situation. So the first step toward meaningful test results is to overcome this unnaturalness by reassuring your testers that they can do no wrong during the test. Otherwise, you risk that they will feel insecure or won’t be honest and speak out their real thoughts.

Test your product, not the user. (Source: www.lifeofpix.com)

Our advice: cross out the term “user test” in your papers and in your mind. Everywhere. Maybe even start your introduction with “We’re not testing you, we’re testing us.” It’s a usability test! Plus: make your participants feel comfortable. If possible, visit them in their natural habitat instead of using a usability lab. All you really need is at least enough space for all your test participants (test user, observers, moderator) and recording setup. Or you could consider a remote test, allowing your test users to stay right at their desks, especially if your users are located somewhere else.

 

#2 Testing too much

Setting up a test is exciting, especially if you have lots of new features coming up or want to test different design versions. But don’t try to test everything at once or fitting every possible task into one session! Otherwise it’s likely that you will either tire out your participants or run out of time and don’t get the desired test outcome. Also, consider who you want to recruit for your test: Not everybody in your target audience may be able to afford to spend the time. The typical test session has a length of 60 to 90 minutes at most and contains 2 to 3 test scenarios. So you can’t test everything at the same time. You need to stay focussed!

Focus on roughly 3 test scenarios to avoid testing too much. (Source: kaboompics.com)

To avoid struggling during the test session, good preparation is needed: Create a list of all the things you want to learn from your test prioritizing the most important tasks and questions (see #3). Items with a lower priority can go to an extra list for later consideration if there’s still time left towards the end of your usability test. Prepare some extra minutes to have some time left rather than running out of time.

Another good way to avoid overwhelming test users is planning to run a longer usability test and break it up into several sessions focussing on different aspects.

 

#3 Asking the wrong questions

Many usability tests start out like this: “Take a look at this homepage and tell me what you think.” or “Take a moment to look around the site.” Don’t waste precious test time on artificial questions like these. You are trying to simulate real conditions in a usability test, but real people don’t come to your site to just browse around. Instead, you are giving away critical insights as you are allowing users to familiarize themselves with your site before the real test has even started. No, people who will use your website or app for real will do so with a specific objective in mind. So you need to make sure to test your design against those objectives. In particular, you should focus on the “red routes” – tasks that are critical for the users and/or the organization and thus should be as smooth as possible. This will also help you stay within the allotted session time (see #2).

Another type of question to avoid are leading questions (e.g. “That new button looks nice, right?” etc.). Instead of learning from the testers and hearing what they really think, you will hear what they think you wish to hear. Instead, ask open-ended questions (e.g. questions starting with W words – what, when, where).

Test your questions to find out if they perfectly fit the test. (Source: unsplash.com)

Finally, be careful how you answer questions the participant might ask you. While you can’t (and shouldn’t) prevent your test users from asking questions, try to answer them with another question. Otherwise, you might be led to compromise the outcome of the test by giving away answers or introducing a bias (e.g. “Clicking here will guide you back. What did you expect to happen?” etc.). Don’t tell them the answer. Instead, ask them for their experience or let them articulate their first impression or expectation. For instance you might respond to a question with something like “What do you want to do?”, “What can you do here?”, “What do you expect to happen?” etc.

To minimize questions from participants in the first place, you should test your questions in advance (see #4).

 

#4 Failing to do a trial run

To avoid getting sidetracked and ensure comparability of results across test sessions, it is best practice to create a detailed test outline that includes all the important tasks and questions you want to ask, often even the introduction text to read out. A commong mistake, however, is to not test your test. Just like you are testing your website or app, you should do a trial run of your usability test. Even if you have prepared a detailed test guide and feel well-prepared, there are lots of things that can go wrong under real-world conditions. Just a few examples: The tasks you prepared may be unclear to participants, requiring spontaneous explanations that may lead to giving away too much information. Or tasks may simply take longer than expected, putting you and the testers under pressure. Or even worse yet, your equipment might not work the way you expected so you may end up leaving participants waiting or not being able to record things or run the test at all. Or you may have overlooked an inconsistency in the test outline that may trip you up. Better to catch that before the actual test!

Use a guideline and run a pilot test. (unsplash.com)

That’s why you need to do a pilot test to determine how long the test will take and if your planned structure makes sense. Finally, once you have created your test guide and made sure it is well-structured and works, stick to it. Don’t digress from the scenarios and questions you prepared for the test session.

 

 

#5 Focusing on what they say

A common method in usability testing is “think-aloud”, i.e. asking the test participants to speak out what goes through their head as the interact with a system and try to solve the tasks given to them. While this type of commentary may give you valuable insight into the user’s state of mind, relying on words can be dangerous. Why? Because what participants say may subjectively be true, but objectively lead to wrong conclusions. First, studies have shown that users are poor at introspecting into their own motivations, so asking the user things like “Why did you do this?” may produce faulty answers. Second, we may get tempted to add questions like “How much would you pay for this product?”, which may work with a large sample, but not yield reliable guidance with the typical test pool of 5-8 participants. Finally, users may feel obliged to be nice to you when really they want to bang their head against the wall out of frustration with your site.

Pay attention to the actions, gestures and mimic of your test user. (Source: unsplash.com)

To avoid this scenario, focus on actions rather than words. Grant participants enough time to express their thoughts and perform actions during the test session, even if this takes a little while, maybe even longer than you expect. Often the participants have a specific mimic or make a gesture. Pay attention to them. Note where participants hesitate, where they seem to be searching for options. Don’t ignore it. Especially, if you’ve already run multiple tests and maybe noticed some patterns, every experience matters! Just because people stop at the same point of a test doesn’t mean it happens for the same reason. Be objective and treat every tester equally. Remind your users to speak out loudly and try to gather as much information as possible, but don’t be misguided by what they say.

 

#6 Interrupting the usability test

Preparing a test guide is best practice, as we already saw, but it is not sufficient. A common mistake is to interrupt the flow of the usability test by inserting unrelated questions. One example is, to ask participants for ideas for alternative design solutions. Usability tests are supposed to help you uncover problems. To do so they focus on problem behavior, e.g. by giving the testers tasks to perform in order to achieve a specified goal (remember, usability is defined as the “extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use”). If they fail, this is critical information for you. But if you then ask them what type of design would have helped them succeed instead of continuing to evaluate why they failed, this will switch the entire discussion, interrupt the flow and likely limit your chance of getting to the actual root cause of the issue.

Avoid unrelated questions that may interrupt the flow. (Source: skitterphoto.com)

Stick to your test guide and avoid interrupting the flow of the test session with questions your participants are actually unlikely to be qualified to answer – most users haven’t studied design and don’t know what options are even available. Instead, test different alternative solutions to begin with. This will help you identify design approaches that work and those that don’t.

Of course, you should also try to avoid other distractions that may interrupt the session, such as background noise, technical issues or unrelated questions, e.g. by setting aside some time at the end of the session to address questions by the participant or observers.

 

#7 No documentation

It’s always about saving time. So often people ignore documenting their findings during a test session, but also mentioning which methodology has been used. Why take notes, if you can have a meeting afterwards, especially if there are other observers in addition to the moderator? But in fact, it should be possible to easily and quickly recap the test session and results need to be visualized for those who didn’t participate in the usability test. Without proper notes you risk missing important results, significantly reducing the value of your test overall. For instance, if you want to figure out how long it takes the user to complete a task or whether she was able to complete the task at all and how many attempts were necessary to do so, you need good data. That’s why a permanent record of the findings is essential.

Document the findings to distill actionable recommendations. (Source: unsplash.com)

To avoid ending a usability test without proper documentation, make sure you have a designated person for taking notes during the session. You can also incorporate space for notes right into your test guide. It might also help to print out screenshots of important parts of the test to keep track of the context of your observations. After each test, schedule some additional time to go through your notes, consolidate findings from the other observers and add any additional information you might have forgotten to capture during the test. Ultimately, you want to produce actionable recommendations for the next design iteration that are based on real user behavior.

Pidoco & AppCooker at UXcamp Europe

UXcamp Europe is one of the largest BarCamps for User Experience Professionals uniting more than 500 UX enthusiasts from all over the continent and beyond each year in Berlin, the heart of Europe. Last weekend it took place again for the 8th time in summery Berlin at Erwin Schrödinger-Zentrum (part of the Humboldt University). Organized by a superb team of volunteers, it featured a wide range of insightful discussions, workshops, presentations and demos from the participants in as much as 10 parallel tracks. As usual, the organizers managed to create lots of room and opportunities for exchange and networking outside the conference room, be it in the shade of the large umbrellas near the barbecue stand or in the adjacent café.

A beautiful summer day at the UXcamp Europe

A beautiful summer day at UXcamp Europe

On Saturday, we had the opportunity to hold a workshop titled “Bring your iPads® – Prototyping On The Go”.  Using AppCooker, a professional app for prototyping on the iPad®, as our example, we had a vivid discussion on the pros and cons of mobile prototyping and the many opportunities it offers in the app design process. We designed mockups for an iOS event app on the fly with the workshop participants and had fun coming up with ways to improve the process from paper to digital prototype. It was great to speak to many of you and receive such valuable feedback. Thanks to all who attended!

After two days of UXcamp, meeting so many creative minds and enjoying the camp’s atmosphere, all that’s left to say is once more: Thanks for the great organization! Thanks to all the campers! Thanks for a great UX weekend!

See you next year!

Pidoco acquires AppCooker

Today is a great day. We are excited that the iOS prototyping and mockup app AppCooker will join Pidoco and strengthen our offering. The acquisition was announced this weekend at the UXcamp Europe conference, one of the largest BarCamps for user experience professionals with 500+ active participants from around the world that has been taking place in Berlin since 2009.

AppCooker: Prototyping on the iPad®

AppCooker: Prototyping on the iPad®

AppCooker is a professional prototyping app for the iPad®, which enables software designers and developers to create mockups of future iOS and watchOS® apps directly on the iPad® for presentation and pre-development testing purposes. The app was developed by Hot Apps Factory, a mobile software company based on the French Riviera, which specializes in the preproduction process of making beautiful iPhone® and iPad® applications.

The takeover is part of our vision to allow all stakeholders of the app design process to participate in prototyping activities across devices. We believe that existing as well as new users will benefit significantly from the acquisition. AppCooker will remain available as a stand-alone app to users via the Apple App Store® and will also serve as a basis for new products.

How to … create a slideshow or carousel

Slideshows or carousels are a neat eye catcher on a site and great way to present different information on limited screen estate. Additionally, they allow users to gain a quick overview of your offering and switch between different topics. With Pidoco, you can easily simulate slideshows and carousels using the “Extended Interactions” feature. And here is how it goes …

 

1. Setting up the project

To build our slideshow we will use several copies of the same page that will only differ in the section representing the slides. Here’s my project which represents the website of a small art museum. Let’s start by building the page that will contain the slideshow. Here I added some headlines and a text block, but note that I left some space in between for the slideshow. This will be the “frame” for our slide show.

Adding the fixed content to the start page

Adding the fixed content to the start page

 

2. Creating the slideshow

Now, let’s add the slides to our project. To add the slides, we will make a few copies of our initial page – we need one page for each slide (since my slideshow will consist of three different images, I will make two copies, so there will be three pages in total). To do so, we click the “Duplicate” button in the context menu.

Cloning the start page to create the slideshow

Cloning the start page to create the slideshow

 

Now we can start editing the slide: Open the initial page and add an image for the slide, as well as any other content you want to show on the first slide. I used an image, some text and a headline. In addition, I added a “Start slideshow” button to the first slide. Note that this puts the user in control of the slideshow, rather than starting it automatically when the page loads.

Editing the first slide

Editing the first slide

 

Do the same with the other two pages to create slides 2 and 3. To ensure consistency, all slides should have the same size and look.

 

3. Adding interactions

Finally, let’s set up the interactive part. To make the slideshow move, we will add several interactions to the start button. To do so, select the button and open the “Interactions” tab of the context menu. To use more than one reaction, click on “Add reaction” in the right column of the Interaction dialog. To initiate several subsequent slide transitions with just one button click, we can use a delay with each page transition. I chose 5 seconds for both transitions.

Using interactions to change the visibility of the slides

Using interactions to change the visibility of the slides

 

Note: Since all page transitions are counted from the first button click, the first transition will have a delay of 5 seconds, the next 10, 15, 20, and so on.

Hint: You can also build a slideshow using layers instead of several pages, by putting each slide on an individual layer and using an interaction that will display and hide the slides in the right order. In this case, however, you need to remember to order the layers such that the next slide is always displayed “on top” – or hide the slides that are not active with every new slide that is displayed.

 

That’s it! You have successfully created a slideshow! Do you need help? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

Aligning interests: New release features customizable grid, icon colors, better zoom

We’re celebrating the arrival of spring time with a new release. Here is what’s new…

 

#1 Customizable grid

The new grid feature supports layouting your screens. The snap-to-grid function makes for an easy and precise arrangement of assets on the canvas. What’s more, you can customize the grid to suit your layout: Simply adjust margins, gutters and number of columns in the grid settings. A grid preview helps you choose the right values while smart defaults help you get started.

Using the grid to individualize the alignment patterns on your screen

The customizable grid helps align elements on your canvas

 

#2 Icon colors/icon search

Following a frequent request, we have added a color option to all icon stencils. And there’s more: Individual icons can be found via the Quick Search feature. Just type what you’re looking for and the matching icons will be displayed in the stencil palette.

Screenshot of icon color picker

Icon colors can make prototypes more realistic

 

#3 Improved zoom 

Sometimes you have to zoom your screen to better view your canvas. We have improved the zoom feature to easily let you see the current zoom level and make it easier to return to normal view. Simply click the current zoom level to reset to 100%!

Resetting your zoomed page

We constantly strive to improve Pidoco, but without you that wouldn’t be possible at all. So we can’t thank our test users enough for their loyal support and feedback.

If you wish to join our monthly usability tests, just send us a quick email to support@pidoco.com and we’ll be happy to provide you with more information. Stay tuned for more!

 

Happy Prototyping!

 

PS: Not a Pidoco user, yet? Why not register for a free 31-day trial today?

Pidoco accepted into BERLIN INNOVATION platform

Pidoco in BERLIN INNOVATION

Pidoco in BERLIN INNOVATION

We are very proud to announce that Pidoco is now officially part of the new technology platform BERLIN INNOVATION which was initiated by the Technologiestiftung Berlin (Berlin Technology Foundation) and is funded by the state of Berlin, the Investitionsbank Berlin and the European Union. Showcasing creative, cutting-edge products, services as well as processes made in the German capital, the platform presents a distinguished collection of Berlin innovations with the goal to establish Berlin as a major innovation hub and provide information to businesses investors, state-owned companies and the general public. With a clear structure, the platform gives insights into innovation projects, supports networking and collaboration, and provides businesses with access to new solutions.

The acceptance of Pidoco into the platform highlights the innovative character of the software-as-a-service product as well as the business potential that rapid application prototyping offers to organizations that invest in modern design and development processes.

For more information have a look at www.berlin-innovation.de.

How to … create a sticky header on a scrollable page

A study by Smashing Magazine conducted in 2012 revealed that “sticky menus” are 22% easier to navigate than menus that scroll out of sight. The reason is simple: users find what they are looking for more quickly if they don’t have to scroll. What’s more, without knowing why, all participants of the study showed a preference for fixed navigation menus. So, in this post we will take a look at how to create a fixed header section on a scrollable page in Pidoco that can be used for navigation and other content. And here is how it goes …

 

1. Setting up the project

Simply speaking, a fixed header (aka: “sticky header”) is a section of a page that has a fixed position at the top of the screen and doesn’t disappear when scrolling the page. Probably the biggest advantage of a fixed header is that it allows the user to easily and quickly jump from the bottom of a page to the top without the need to scroll up the entire page. To build our fixed header we will use two pages, an element called “scroll frame”, and a little trick: We simply divide the page into a fixed header section and a scroll section and only let the content of the scroll section (defined by the scroll frame) scroll. The other page will just serve as a container for the scrollable content and be linked into the main page.

As an example, I have chosen the “New contact” screen of an imaginary address book app. The sticky header section of the screen contains a navigation bar that gives the user two main options: going back to the contact list or saving the new contact. The section below the header lets the user add contact details and is scrollable due to the many options including name, address, telephone number etc. Here’s a preview of what my finished address book will look like.

Preview of the sticky header project

Preview of the sticky header project

 

2. Creating the sticky header

We start off with creating the sticky content of our screen, i.e. the section containing the fixed header. To do so, create a new page (smartphone portrait format) and add all elements that should not scroll with the page. In my example, this includes a status bar as well as a navigation bar with a title and two navigation controls.

Adding content to a fixed header on a project page

Adding content to a page to create a fixed header

 

3. Building the scroll section

Now let’s create the part of the screen that that will scroll. To do so, add a scroll frame stencil to the page and resize it to cover the entire part of the screen that should scroll.

Adding a scroll frame to your page

Defining the scrollable section using a scroll frame stencil

Now open the context menu of the scroll frame and click the “Create a new page” option from the “Target” dropdown. This will do two things: Create a new page, which be the container for the scrollable content of the main page, and link the new page into the main page via the scroll frame.

Creating a new page to build a scrollable page

Linking a new page into the scroll frame element to build a scroll section

 

4. Adding scrollable content

Now, all that’s left is adding the scrollable content to the new page. To actually be scrollable, however, the new page must be longer than the main page. So, make sure to increase the length of the page.

In my example I added several text input elements and text elements as well as icons to create a complete contact details form, including even a profile picture.

Changing the length of the page

Changing the length of the page

Finally, we can preview the result by clicking on the “Simulate” button in the toolbar. Here is what my finished project looks like.

 

That’s it! You have successfully created a scrollable page with a sticky header! Do you need help with your project? Then do not hesitate and drop us a line via support@pidoco.comor Facebook and Twitter.

Happy Prototyping!

How to …. create navigation structures (part 5): The accordion

Here it is, our final part of the series on common UI design patterns. This time, it will be all about the accordion. You can find the previous parts of the series here:

You have certainly heard of the musical instrument called accordion – that beautiful instrument, you play by compressing or expanding bellows and pressing buttons. The navigation element called “accordion” picks up this principle: In the realm of UI patterns, it refers to a horizontal or vertical panel including a two-tiered set of options: grouped visible top-level categories and hidden second-level categories. Clicking or hovering on one of the top-level categories, usually there are up to ten in total, reveals the associated, but so far hidden sub-content, often with a sliding effect.

The accordion navigation pattern, in general, is best used to display a large amount of information or options in a limited space. Also, it provides an overview of all available main categories. While the vertical alignment of the accordion helps to create a navigation path and to display sub-menu items, the horizontal accordion menu is a good choice to display large content areas.

Typical characteristics of the accordion are:

  • each panel represents one group and stacks all the associated second-level content,
  • each panel can be expanded to display the sub-categories, leaving the rest collapsed,
  • usually a click or hover action opens the accordion’s panels,
  • the most important panel is usually already open by default,
  • the total number of panels should be kept small (up to 10) for a better overview.

Now that we have a good understanding of the accordion, let’s create one. Here is how it goes …

 

1. Setting up the project

The accordion navigation is best built from bottom to top, i.e. we start with the sub-categories, then aggregate them into the top-level categories, and finally combine them into the single accordion structure. First, we need pages on which to put the actual content, which I’ll call content pages – one for each sub-category. To save time, I recommend creating all the content pages in advance (we will add the respective content later). If you have X sub-categories, you should now have X content pages.

For the accordion menu itself, we will use one layer and several pages, which will become the panels or sections of the accordion that are shown when the accordion is expanded – one for each top-level category. Let’s call them panel pages (see step 2). In my example, the accordion will contain four top-level categories, i.e. four panels: “World”, “Business”, “Politics” and “Life”. In total, that’s X + 4 pages.

Each top-level category of the accordion expands to display a panel with all sub-category entries, represented by separate pages

Each top-level category of the accordion expands to display a panel with all sub-category entries, represented by separate pages

2. Creating the accordion panels

The panels of the accordion are used to display the sub-categories when a top-level entry is clicked. For maximum flexibility, each panel is created on an individual page (see above) and referenced into the accordion menu (see step 3). To make the four panels in our example fit into the accordion, let’s resize the pages to 400 px width. You should also adjust the height of each page to the number of sub-category entries that need to fit. There shouldn’t be too much space – unless you want it there. Now, add the titles of the sub-categories to the panel pages using one or several link stencils.

Resizing the panel pages to fit to the accordion frame and the sub-category entries.

Resizing the panel pages to fit to the accordion frame and the sub-category entries.

Finally, link the entries to the respective content pages, using a “click/tab” interaction, which shows the target page as an “instant link”.

Linking the sub-category entries of the accordion with the corresponding content pages.

Linking the sub-category entries of the accordion with the corresponding content pages.

3. Consolidating the accordion

Now we have all the building blocks in place to finally consolidate everything into the accordion menu. To avoid duplicate work, let’s create our accordion on a layer, which we will later display on each content page where it should be accessible. Create a layer by clicking on the “New layer” button in the My Layers panel. Next, add the “Accordion” stencil to the layer and resize it to 400 px width (or whatever width you gave your panel pages).

Adding the accordion stencil to the layer will open it for editing

Adding the accordion stencil to the layer will open it for editing

The accordion stencil will automatically open up for editing. Now, let’s enter the names of the top-level categories. Each line represents a category entry. To display the correct panel upon click, we need to link each entry to the corresponding panel page. To do so, highlight the entry and select the target panel page from the dropdown menu.

Linking the top-level categories of the accordion menu to the corresponding panel pages

Linking the top-level categories of the accordion menu to the corresponding panel pages

Voilà! This is what my “Business” category looks like (shown in a screenflow).

Linking a panel of the accordion menu to the content pages of the respective sub-catogies, shown in a screenflow.

Linking a panel of the accordion menu to the content pages of the respective sub-categories, shown in a screenflow

Now, all that’s left to do, is going through the content pages and activating the accordion layer on each one by selecting the layer’s checkbox in the My Layers panel.

To see a preview of your accordion, click the “Simulate” button in the toolbar. Here is what my finished project looks like.

Preview of the finished project "Accordion Menu"

Preview of the finished project “Accordion Menu”

That’s it! You have successfully created an accordion! Do you need help building an accordion? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

Happy holidays – Drag & drop image upload

Holidays are around the corner and Pidoco will be in holiday mode until the beginning of the year. But of course, we wouldn’t go on holiday without giving you a little present! That’s why we have just launched a beautiful new feature that we think you’ll love. Our brand new drag & drop image upload can do more than just help you save time on uploading pretty graphics.

Upload images

Use the new drag-to-upload feature when you are editing a page in order to quickly add image files, such as icons, banners or photos to your page. Simply drop one or more files directly onto the canvas and they will be uploaded right in place. Voilà, no more extra clicks to upload content! This works with all PNG, JPG, BMP and GIF files.

Bulk-adding images via the canvas for quick-editing

Bulk-adding images to an empty prototype page via the new drag & drop image upload feature

Note: You can also drop images to the stencil palette if you don’t need them right away. They will be added to the end of the stencil palette as with the normal image upload.

Create pages from screenshots

As we said, there’s more. If you like to start out with existing screenshots or photos of your scribbles, try this: Open an empty screenflow, grab your screenshots and simply drop them into the screenflow. This will turn each image into a page with the right dimensions and place the screenshot in the background of the page so you can prototype right over it. Now simply arrange the pages, open them to place some action areas on top and go back to the screenflow view to link the screens up using the action area hotspots. Done!

Quick-adding images via screenflows to set them as page background

Dropping images into a screenflow to generate pages for a prototype that can be linked via action area hotspots

 

We hope you’ll enjoy our little holiday gift, which resulted directly from feedback we received from our users. We would like to take this opportunity to thank all of you who help us continually improve Pidoco through your feedback, especially our loyal test users who have been supporting our efforts by taking time to participate in usability test sessions throughout this year. You are wonderful! If you aren’t a test user yet, but would like to take part in one or more of our monthly usability tests, just send us a quick email to support@pidoco.com and we will be happy to provide you with more information. Stay tuned for more to come in 2016!

Happy holidays!

 

PS: Not a Pidoco user, yet? Why not register for a free 31-day trial today?

How to …. create navigation structures (part 4): The doormat

Here it is, part four of our series on common UI design patterns. This one will be all about the navigation pattern called “doormat”. You can find the previous parts of the series here:

The doormat is a navigation element that consists of two parts: a navigation bar displaying the main categories and a collapsible menu, the so-called “doormat”, which lists the sub-items. The horizontally aligned navigation bar usually consists of up to four main entries that serve as the labels of the sub-entries, too. The doormat only shows up, if the user hovers the mouse over one of the categories or the entire navigation bar. The doormat typically contains up to 8 items arranged in columns and references the main categories.

The doormat navigation pattern is best used on information rich websites to display complex content and to guide the user to the right section of the site. The doormat provides a clean, easy-to-understand and informative structure and provides quick access to each section of the website. This is a convenient way to welcome users by literally rolling out details on a red carpet (or the doormat), without overwhelming them with too many details upfront.

Typical characteristics of the doormat are:

  • usually located at the top of the page below or next to the site branding and header,
  • one horizontal row with up to 4 main categories (navigation bar),
  • vertically collapsible panel (doormat) with columns of up to 8 sub-items,
  • every sub-item belongs to one main category,
  • doormat only appears upon hovering over a category or the entire navigation bar,
  • doormat usually spans the entire width of the page,
  • first category is reserved for “Home” (unless it is offered as separate option).

Now that we have a good understanding of the doormat navigation, let’s create one. Here is how it goes …

 

1. Setting up the project

To build the doormat navigation we will use several layers – two for the doormat itself plus one layer for each sub-item on the doormat. To save some time, I recommend creating at least the two layers for the doormat in advance by clicking the “New layer” button in the layers panel. We will add the respective content later. I will use a news website as example in this post, and will call the two layers used for the doormat “Navigation bar” and “Doormat”.

Preview of the finished doormat navigation

Preview of the finished doormat navigation

2. Building the doormat navigation

Our doormat navigation consists of two parts on separate layers: the upper part is a navigation bar that represents the main categories and will be built on the “Navigation bar” layer. The lower part forms the actual doormat containing the sub-items and will be built on the “Doormat” layer. The actual doormat with all its sub-items will only be visible upon hovering over the main navigation bar.

2.1. Creating the navigation bar

Since the navigation bar will stay the same across the entire project, let’s put it on the “Navigation bar” layer. To do so select the layer in the layer panel. Then add a rectangle as background for the navigation bar and place several text stencils on top for the main categories, in my example “World”, “National” and “Local”. Leave some space at the top of the page so we can add some branding above the navigation bar, e.g. an image stencil as logo that links back to the “Home” destination and a headline.

Creating the main navigation bar in a layer

Creating the main navigation bar in a layer

To make the doormat appear when the user hovers over the navigation bar, we will use an action area stencil that will react to a hovering mouse. Place it on top of the navigation bar and make sure it spans the entire width, so it can register the mouse anywhere above the navigation bar.

Now set the action area to display the second layer by going to the context menu and adding a new interaction in the “Interactions” tab. In the interaction dialog, select the hover interaction and set the reaction to “change layer visibility” for the “Doormat” layer. Choose “Toggle” for the visibility.

Linking the layer wit main navigation bar with the layer containing the doormat

Linking the layer wit main navigation bar with the layer containing the doormat

2.2. Creating the doormat

The second part of the doormat navigation, our actual doormat, will be built on the “Doormat” layer. For this one, add a rectangle as background and place the sub-items on top, e.g. a text stencil for each entry. Here I created six sub-items, two for each main category.

Creating the doormat on a new layer

Creating the doormat on a new layer

The sub-items will link to different content layers which will contain the actual content of the website. If you haven’t already done so, this is the time to add the content layers – one for each sub-item. (Hint: Don’t forget to include one for the “Home” destination.) To allow the respective layer to be shown when the user clicks on the corresponding sub-item we will use action areas again (one for each entry) and attach an interaction to each (s. above). Since only the one layer with the respective content should be displayed and all the other layers should be hidden, add as many reactions as necessary and set the layer visibility in the interaction dialog accordingly (the content layer to show should be set to “show”, while all other content layers should be set to “hide”). Here, for instance I added a click interaction that displays the layer “World – Politics” and hides all the rest.

Linking sub-items of the doormat to the content layers

Linking sub-items of the doormat to the content layers

2.3. Making the doormat disappear

Since the doormat should disappear again, when you hover anywhere outside the actual doormat or the navigation bar, we will place action areas above the navigation bar and below the doormat on the “Doormat” layer. Now we simply need to add the following interaction to these two action areas: “When the user hovers then change layer visibility of the layer ‘Doormat’ to hide”.

Adding action areas to the main layer to make the doormat disappear

Adding action areas to the main layer to make the doormat disappear

Note: To work properly, the “Doormat” layer must be on top of all other layers. If it is not, go to the layer panel and simply drag it to the top of the stack.

 

3. Adding content to the content layers

Finally, all we have to do is adding content to our layers. Hint: Don’t forget to switch to the right layer when adding the content.

Switching layers in the layer panel to add content to each one

Switching layers in the layer panel to add content to each one

By clicking on the “Simulate” button in the toolbar, we get a preview of our project. Here is what my finished project looks like.

 

That’s it! You have successfully created a doormat navigation! Do you need help building a doormat navigation? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!