Posts from "October, 2015"

How to …. create navigation structures (part 1): The navigation bar

An easy-to-use navigation is a must for every website. Choosing the “right” navigation design, however, depends on your site’s purpose and architecture as well as on the visual and textual content. To give you an overview, we are launching a small series of posts today that will explain common UI design patterns for site navigation and show you how to prototype them in Pidoco with only a few clicks. The series will include the following topics:

  • navigation bar (part 1)
  • tab navigation (part 2)
  • double tab navigation (part 3)
  • doormat navigation (part 4)
  • accordion (part 5)

In the first episode, let’s have a look at the so-called navigation bar. The navigation bar is a simple linear navigation structure that usually appears at the top or left edge (right edge in the case of semitic language sites) of a page and consists of multiple entries that provide quick access to content of a website that is organized in categories. This pattern can be used when users need to be able to find content or features needed to accomplish a task and when it is important to keep navigation display space compact. The navigation bar can be used as top-level navigation of a website or as sub-level navigation in combination with tabs with up to 10-12 categories.

Typical characteristics of the navigation bar are:

  • located at the top or left of a page and has a horizontal or vertical orientation,
  • collection of vertically or horizontally arranged links within one navigation element,
  • each category in the navigation bar is distinctive and clearly separated
  • a form of “Home” item usually represents the first category of the navigation bar,
  • remains unchanged during browsing and is visible on every page to which it links,
  • the current location of the user is not reflected as a state in the navigation bar.

Using a top navigation bar, there is no general recommended number of categories, but it of course depends on the average length of the words you use, the font size, as well as on the size of the page you design for. A considerable benefit of a top navigation bar is that it allows for full use of the width of the page for other content.

Using a left navigation bar, your site is split (at least) into two columns, whereas the left one is used for navigating through the top categories of the site. This kind of navigation bar is best used if page width does not matter as it will require considerable horizontal space.

Now that we have a good understanding of what the navigation bar is and when we should use it, let’s build one. Here is how it goes …

 

1. Setting up the project

To build the navigation bar we will use layers and interactions. To save time, it’s best to have a vague idea of how many category entries the navigation bar should have. As every category of a navigation bar will be on one page, we can create the exact amount of pages in advance and name them accordingly. We can add the respective content later. Here I have created six pages for my web project, whereas my first page is called “Home” and the rest of the pages are entitled “Page 1” – “Page 5”. Hint: You can use a screenflow to visually structure your pages.

Creating all main pages to be linked in the navigation bar (Here you can see a screenflow of my finished project)

Creating the main pages to be linked in the navigation bar (Here you can see a screenflow of my finished project)

 

2. Designing the navigation bar

To avoid duplicate work and maintain maximum consistency, we will put our navigation bar into a global layer that we can show on every page that should contain the navigation bar. This way, the navigation bar will remain unchanged, no matter where we display it. To create a layer, click on the “New layer” button in the My Layers section. (Hint: If the panel is hidden, open it using the arrow icon.) Now let’s build the navigation bar. The design is completely up to you and, for example, depends on your corporate design and the website architecture. You can find some inspiration on Welie.com or Yahoo! for instance. 

Here I have named my layer “navigation bar” and used an image stencil representing the “Home” page as well as five black rectangles for each category with labels “Page 1” etc.

Setting up the main categories and labels of the navigation bar

Setting up the main categories and labels of the navigation bar

Since we have already created all our pages, we can now quickly link each category to the respective page. To do so, place an action area on top of each category and use the context menu to set a target page. (Hint: This is a shortcut for the “click/show page” interaction.)

Adding target pages to the navigation bar categories

Adding target pages to the navigation bar categories

 

3. Adding page-specific content 

Finally, all that’s left is adding the individual content to each of our pages and to display the layer containing the navigation bar on each of the pages. To do so, we open on the respective page and toggle the checkbox to display the navigation bar layer. 

Displaying the navigation bar on every page

Displaying the navigation bar on every page

 

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

 

That’s it! You have successfully created a navigation bar!

Do you need help building a navigation bar? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

How to … design for multiple devices

With an ever increasing number of devices and operating systems on the market it has become virtually impossible to design device-specific content. Responsive design, especially the device agnosticism, has therefore become the de-facto standard of today’s sites. It’s all about the content of a page and that content needs to look great on any device.

But where should designer start? While the razor-sharp focus of mobile sites has lead many to advocate a mobile first approach, the reality for many businesses still is desktop first, influenced by a variety of factors, such as existing site structures or the majority of revenue still coming from desktop users. Focusing on the mobile experience, usually means that content will be much more compact and simplified, concentrating on the main functions and core features. The desktop version then is an expansion of the mobile experience. Starting from a desktop version, on the other hand, allows designers to think more conceptually and design for a full screen experience without having to consider so many limitations. Turning a more complex site into a mobile version later, however, can often be more challenging. The final decision should be based on an indepth understanding of the target audience and their needs based on the most common use cases.

Whatever your decision, Pidoco allows you to do both: With the latest release, Pidoco makes designing for multiple devices even easier, allowing you to design responsive experiences in one single project. Here is how it goes …

 

1. Create a new project

Let’s start by generating a new project. To do so, just click the “+ New project” button and the Project View will open up in a new tab.

Step 1: Creating a new project

Step 1: Creating a new project

 

2. Create the desktop page

In this simple example I want to take the desktop first approach. Of course, you can start with mobile as well. To design the desktop version of your site, select a desktop screen type for the first page from the device dialog, such as the web browser. This will create a new page with typical desktop dimensions (1366px by 660px).

Step 2: Selecting a device-specific screen to start your new project

Step 2: Selecting a device-specific screen to start your new project

 

3. Design the desktop page

Now we can start designing the desktop version by adding content to our desktop page from the stencil palette. The web browser displayed around the canvas helps keeping the context in mind. (Hint: You can hide the frame using the “Hide frame” option above the canvas.)

Step 3: Designing a page for the desktop version

Step 3: Designing a page for the desktop version

 

4. Create the mobile page

Once we have designed the desktop version, the next step is to design the mobile version. So let’s create the corresponding mobile page. To save time and make use of the work we have already done, simply duplicate the desktop page using the context menu. (Hint: Rename the page to avoid mixing the two versions up.)

Step 4: Duplicating the desktop page as basis for the mobile version and...

Step 4: Duplicating the desktop page as basis for the mobile version and…

You will now see an exact copy of the desktop page that we want to turn into our mobile version. To do so open the device dialog by clicking the device icon at the top of the canvas and change the screen type to smartphone. This will change the size of the canvas, but leave all elements in their original position. Now you can rearrange the content and resize or reduce it where necessary to fit the mobile screen size.

Step 4: ...changing the screen type to smartphone

Step 4: …changing the screen type to smartphone

 

5. Design the mobile page

The final step is to adjust the design of the page by rearranging and where necessary also removing elements. To do so, simply move the elements to their new positions and resize them. Of course, you should also consider consolidating navigation options, using for example the (in)famous hamburger menu or even weed out the options that your target audience will not be using on mobile devices. (Hint: You should also take a look at the interactions in your prototype to make sure they are optimal in each context of use, e.g. you might think about replacing click interactions with swipe gestures for the mobile version.)

Step 5: Adjusting the desktop design to create a mobile version

Step 5: Adjusting the desktop design to create a mobile version

Finally, in the Simulation View you can check out both the mobile and desktop versions. That’s it! You have successfully created a project for multiple devices!

Do you need help working with different devices and screen sizes? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

Putting the “frame” in wireframe: New release features more realistic prototypes

Here it is, our latest release! And we have some awesome new features that we think you will love. Check out what’s new…

#1 More realistic appearance of prototypes

Pidoco allows you to easily create screens for specific devices, from smartphone to desktop. Starting with this release, prototype pages now can have an optional device frame in editing and simulation mode that give your designs a better context and will make your prototypes look more realistic. The frame matches the device type you pick for your screens and can be hidden if you don’t need it.

Device frames show context and give prototypes a more realistic look.

Device frames show context and give prototypes a more realistic look.

 

#2 Wider selection of screen types

Along with the new device frames, we have expanded the selection of screen types for you and made it even easier to pick the right one. Needless to say, you can change the screen type at any time and adjust screen size to allow for scrolling pages. The new device dialog will let you pick a screen type, e.g. iPhone, iPad, Android device or web app, when you start a new project. Each new screen will remember this setting until you change it. And of course, there’s also a custom screen size option.

Choosing a screen size is becoming even easier

Choosing the right screen size for your prototype is becoming even easier with the new device dialog.

 

#3 Easier page setup

We have expanded the page setup options next to the canvas, which we introduced in our previous release, in order to make your workflow even smoother. Now you can rename pages, change screen size or switch device types without even having to open the context menu. The page options are always easily accessible at the top of the canvas whenever you need them.

Changing page settings without opening the context menuChanging page settings without opening the context menu

Changing page settings without opening the context menu

 

#4 More simulation options

With this release we have added a frequent request – alignment options for the prototype preview. Now you can not only view your prototypes with or without a device frame, but also simulate scenarios that require left, center or right alignment of screen content. In addition, we have added a “fit to screen” option to allow for a complete view of large prototype pages.

Preview options include device frames, sketched mode, alignment and fit-to-screen.

Preview options include device frames, sketched mode, alignment and fit-to-screen.

 

We constantly strive to improve Pidoco. Stay tuned for more!

Finally, a massive thank you to all our loyal test users supporting our efforts in improving Pidoco. If you would like to join 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.

 

Happy prototyping!

 

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