How To … Work With Screenflows

Screenflows are a great way to visualize the structure of your prototype. Screenflows allow you to create maps of multiple pages in order to demonstrate navigation paths, site maps or workflows. They can also facilitate the creation and organization of your prototype as they allow you to focus on specific use cases and quickly see how pages relate to each other. So here is how it goes …

 

Step 1: Create a screenflow

Simply put, a screenflow is a selection of pages of your prototype, i.e. a subset of all available pages. You can manage and create screenflows from the Prototype View. To create a new screenflow, click on the “New” button.

Create a screenflow within the Prototype View

Creating a new screenflow from the Prototype View

 

Step 2: Edit the screenflow

In order to edit the screenflow, double-click on it. This will direct you to the Screenflow View where you can add, arrange and link pages. To add a page, simply drag it from the My Pages panel on the left and drop it into the editing panel in the middle. You can arrange pages by simply moving them with your mouse. To remove a page from the screenflow, use the “Hide page” button in the Context Menu.

Add all previously not used paged to your screenflow

Add all previously not used paged to your screenflow

Hint: If you want to use all the pages of your prototype, click on “Add all unused pages”. Each page can only be used once per screenflow. Pages you have already included are greyed out.

 

Step 3: Link pages and create maps

Screenflows are a convenient way to link the pages of your prototype. To do so, select a page and all linkable elements will be highlighted (Note: elements that may contain multiple link targets must be linked directly in the Page View). Now drag any highlighted element onto the desired target page to create a new link. Use the “Remove link target” button to break unwanted links. Yes, it’s that simple.

In order to create a map that shows connections between pages, you can choose to display relevant links in the screenflow. To do so, select a page and you will see all existing links as little grey arrows going to and from the page. Use the “Show arrow” and “Hide arrow” buttons to pick which links should be visible in the map.

Show linked pages within the Screenflow View

Screenflow showing a map of linked pages

Hint: Double-click any page in the screenflow to edit it.

That’s it! You have successfully created and edited a screenflow!

 

Do you need help creating screenflows? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

Happy Prototyping!

Top 5 Things Prototypers Can Learn From Football!

It’s this time of the year again! It’s the BIG BOWL GAME DAY! Tonight the New England Patriots will fight against Seattle Seahawks. While we at Pidoco are still placing our bets and discussing which company will place the most awesome ad, we also noticed some similarities between creating a prototype and playing the perfect match. Wait, you think football and prototyping don’t have anything in common? Think again because as a “prototyper” you can learn a lot from it. Here are our Top 5!

 

1. Tactical creativity
Whether it’s matching day or the day you start creating a prototype, you need to have an idea of what you are going to do and what the final result should look like. So you start scribbling down your ideas for a prototype. This will help you to get a clearer structure of your prototype and its content. Whether a greenhorn or an expert, you, your product manager or whoever is in charge have to find out if there are already competitors out there and what their products’ core features are like. From that, you can chart out your strengths and figure out how to improve potential weaknesses.

Create you creative tactic

Develop a creative tactic

The coaches Bill Belichick of the New England Patriots and Pete Carroll of the Seattle Seahawks can, of course, draw back on a very long NFL career; nevertheless they have to do their homework as well and do what every coach has to do: find the strengths and weaknesses of their teams, train players to improve their skills, build up strong offensive and defensive lines, encourage the players and of course, finally create the perfect tactic for the final matching day by monitoring every little step of the opponent.
Whether you start from scratch or are already an experienced superstar, all the creativity and tactics are important, but you need to be able to adapt to suddenly arising chances and maybe even rebounds. It’s an ongoing iterative process.

 

2. Collaborative sportsmanship
Best results can only be achieved when working together. That’s nothing new, but something really important. Of course, you need a coach, a quarterback or a designer, product manager etc. to strive forward, but creating a competitive product is like building a strong backfield – it only becomes a bastion if you really work together.

Collaborate with your team members

Collaborate with your team members

When prototyping you can try sharing your prototype with others to get feedback or work on solutions collaboratively in real-time. So, you see … whether you are part of the Patriots or the Seahawks or of an app development team, it’s all about exchanging ideas and talking about strategy, tactics and all the many details.

 

3. Impressive interactions
Rather than coming along with fancy details, especially early prototypes can fully rely on simplicity, simple colors, simple structures and even placeholders instead of detailed content. Nevertheless this doesn’t mean that you have to leave out important, unique core elements. In prototypes you might create a simple black and white wireframe, but since especially mobile applications are about interactions, touch gestures or screen transitions, exactly those interactions shouldn’t be ignored. So with only a few clicks, add interactions to an element (e.g. a swipe gesture), define corresponding system reactions (e.g. a pop-up opens) and voilà, you breathe new life into your simple prototype and impress without much effort.

Set the reaction to a action

Bet on interactivity

It’s the same with a football match. Honestly, we all know this and have seen quite a lot of those matches: They didn’t look that nice and mainly showed very simple maneuvers or “impressed” with rather unspectacular moves over quite a long time. But there are those moments, when the crazy snap frenzy suddenly starts and e.g. Tom Brady or Russell Wilson see their chance, get the ball from the center, immediately plan a spectacular move, outmaneuver the opponents defense or pitch the ball backwards to a running back or even crazier run the ball themselves and serve a nice quarterback sneak. A perfect way to describe an action-reaction-chain consisting of “only” a few moves!

 

4. Entertainment
Football matches are not only about tactics, collaborating and interacting. Of course they are just as much about entertainment! Certainly, the teams will present themselves in the best possible way and will work extremely hard to finally get the Vince Lombardi Trophy. However, the Super Sunday, especially for the viewers, is also about being entertained by the expensive commercials excelling themselves, and of course by the music acts appearing during pre-game or halftime ceremonies. It’s all about having the perfect night, fun and the perfect presentation of everyone’s skills.

Entertaining interactions

Entertaining interactions

The same applies for your prototype. Once you are done with all the preparations and ready to present it to the decision makers it’s often all about top or flop. So you need to impress. And you can easily do this by simulating your prototype on the device it should finally be used on. Let’s say, you created a prototype to be used on a tablet, well simply simulate it on one! Even better: if you built a location-based service app, you could embed a map into your prototype and set the interaction such that e. g. a pop-up window appears on the screen once you have reached a specific spot. So why not invite your audience for a stroll around the city and they will certainly be impressed by your new LBS app. Or add some music for instance to add to the entertainment.

 

5. Result-oriented discussions
To be honest, the more people are involved, the more opinions rise up. Sometimes this can be really awkward and it’s not always easy to deal with it, especially if you don’t or can’t agree on something. As a prototyper collaborating with various people you are certainly familiar with discussions about things like the size of a button, the position of an image or even the shade of green. But especially when simulating your prototype, everybody can get a realistic impression of the final result and you can steer discussions by focussing your prototype on the most critical aspects of the project. Sometimes less is more, and eventually the perfect position and size are found. You can take this even further: why not invite test users to work with your prototype and ask for their feedback and the experience they had? The aim should be clear: result-oriented discussions will definitely help you create a better product.

Taking home the Vince Lombardi Trophy is THE goal for the New England Patriots and Seattle Seahawks on Sunday. We can all guess how many discussions on tactics, analyses etc. this involves.

Discuss the results

Discuss the results (Photo by Johntex, 2005. under the terms of the GNU Free Documentation License Version1.2)

No matter which move is made, which player makes the deciding touchdown, everything will be strictly monitored and heavily commented on especially by the fans. We are all quite good at that, aren’t we? But even if we root for the same team, it doesn’t necessarily mean that we have the same opinion, and we can certainly support different tactics or know more effective moves.

Probably, the only way to avoid discussions is to be around people sharing your thoughts. But in this case, whether you are the coach, a team member, the prototyper, the product manager or the viewer etc. a vivid and constructive weighing of all options, what-ifs or (missed) chances and opportunities would disappear – and with them also the praise and celebration. Wouldn’t this be boring?

Finally, who will win tonight? Well, we are still undecided, but to make your choice a little easier, here are some facts on the finalists …

The finalist check: New England Patriots vs. Seattle Seahawks.

The finalist check: New England Patriots vs. Seattle Seahawks.

 

What do you think which team will win? Let us know on Twitter, Facebook or Google+.

How To … Adjust the Screen Size of your Prototypes

Today, most websites and apps need to work on various screen sizes, including those of smartphones and tablets. Responsive design is therefore one of the hot topics in UX. With Pidoco you can prototype for multiple devices – all in the same project. All you need to do is to set the desired screen size for your prototype pages. Here’s how to…

 

 1. Web prototypes

When creating a new web prototype, you will start out with a default page size of 960 x 1000 px. To adjust the page size open the page’s context menu (e.g. by clicking on the “Options” icon or by right-clicking on the page) and change the “Width” and/or “Height” values in the Properties tab. Pidoco will automatically remember these settings and apply them to new pages.

Page dimensions of prototypes are easily adjusted via the page's context menu

Page dimensions of prototypes are easily adjusted via the page’s context menu

Hint: Aside from using the breadcrumb navigation as shown above, you can also access a page’s context menu from several other places, including the Page View, Prototype View or the Screenflow View.

Adjust the page dimensions of web prototypes via the Page View and the breadcrumb navigation

Example of the page context menu as accessed from the Prototype View

 

 2. Mobile prototypes

Mobile prototypes come with a selection of common screen sizes, like smartphone (e.g. for iPhone or Android apps) or different tablet sizes, but of course you can set your own size. When adding a new page, you can select the desired screen size from the “New” dropdown in the toolbar. The default is 320 x 568 px (a smartphone screen in portrait mode). To adjust the page size simply open the page’s context menu and change the “Width” and/or “Height” values in the Properties tab.

Other available pre-defined screen sizes are:

  • 7″ tablets (600 x 800 px) in portrait and landscape formats
  • 10″ tablets (768 x 1228 px) in portrait and landscape formats

 

Adjust the page dimensions of mobile prototypes (via the Page View)

Mobile prototypes offer a range of pre-selected default page dimensions for various devices

 

That’s it! You have successfully resized your prototype pages!

Do you need help resizing your prototype pages? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

 

Happy Prototyping!

 

 

PS: If you are not sure which sizes are best to use, here is a quick overview on the commonly used dimensions of websites. Iteracy.com listed the page widths of widespread websites. For instance Facebook and LinkedIn have a fixed width of 980 px, whereas Bing comes along with 970 px and YouTube with 961 px. In terms of the height, 600 px marks an imaginary line from which on a visitor is likely to begin scrolling. According to w3schools.com and hobo-web.co.uk, optimizing your page for a resolution of 1024 x 768 px will guarantee a trouble-free scrolling for the majority of your visitors.

In terms of mobile devices, this is tricky as there are many different old and new devices out there. Here websitedimensions.com collected some useful information as you can see from the image, and mydevice.io presents a list of the physical and CSS values of various mobile devices, tablets and phablets.

However, when creating a new prototype, use page dimensions you expect most of the visitors to be using. In this case, it is recommended to do some research in advance.

How to … Edit Menus, Tables and More (Pidoco Syntax)

In Pidoco you can easily edit elements using a specific notation, which is actually similar to what is commonly referred to as the wiki syntax. You can find this notation in stencils like the TableMenu or Tree view as well as in the (un)ordered List. This post explains how to create and configure these elements. Here is how it goes …

 

1. In General

In Pidoco, stencils that contain textual content (e.g. menu, tree view, lists or even simple text) can be edited in order to alter that content and replace it with your content. To edit an element double-click on it and a simple text editor will open. But there’s more: When editing the content of certain elements in Pidoco, the Pidoco syntax allows you to tell Pidoco how you want the content to appear in your prototypes. For example, you can set formatting options by adding certain characters or symbols to an element’s content. The following conventions apply for all stencils that offer this option:

  • Adding entries: Each line in the text field represents one entry and starts out with a specific symbol, e.g. an asterisk (*) or a hash character (#).
  • Structuring entries: For stencils whose entries possess a hierarchical structure, the number of symbols marks the hierarchical level of the entry, e.g. one symbol stands for a top-level entry, two for a sub-level entry or three for a sub-sub-level entry etc. To add an entry, simply go to a new line and type your entry, preceeded by the appropriate number of symbols and a space.
  • Linking entries to a prototype page: Links are marked by brackets around the linked entry ([]) and the ID or URL of the link target immedialy following the opening bracket (Example: * [page0001 First Entry]). In this example, “page0001″ is the page ID and “First Entry” the actual entry that will be visible in the prototype. Note: There’s no space between the opening bracket and the link target. Let’s assume you have already typed up the various entries of the stencil: To link an entry, highlight the entire entry you wish to link up and choose the target page from the dropdown menu shown in the text editor.
  • Linking entries to an external URL: The syntax is the same as for a link to a prototype page, but instead of the page ID, the external URL is written after the opening bracket.

 

2. Notation examples

a) Menu

In the Menu stencil each line represents one specific entry marked by one or more asterisks, depending on the level in the hierarchy. Only the top-level entries (one asterisk) are visible in the prototype, until the user opens the menu to display lower level entries. To add a new entry, go to the respective line, enter the asterisk(s) at the beginning, add a space character and type in the text of the entry, e. g. * Home. To link to a page within the prototype highlight the entire line and choose the desired target page from the drowdown of the text editor, for instance [page3243 Home]. To link up external content, paste the URL instead of the page ID, e.g. *** [https://pidoco.com/en/help/doc/stencil Stencil].

Notation specific for the menu stencil (incliuding internal and external links)

Notation specific for the menu stencil (including internal and external links)

Hint: Don’t forget the space character between the asterisk(s) and the opening bracket and between the page ID/external link and the name of the target page. If you cannot see all of menu entries in the menu, try to resize the stencil as it may require more space.

The formatted menu stencil (in the Simulation View)

The formatted menu stencil (in the Simulation View)

 

b) Table 

The Table stencil contains data structured in rows and columns. As usual, each row equals one line of text. The columns are marked by vertical lines | as a separator (also known as “pipes”). If you add a new row, remember that each row starts and ends with a vertical line that together represent the outer border of the table. To add a column, use the pipes and don’t forget to leave at least one empty space before and after each pipe, e.g. | Rank | Page | Impressions |. Each cell in the table therefore has an “opening pipe” and a “closing pipe”. Hint: Rows can have different numbers of cell entries, but the number of columns in the table is determined by the row with the highest number of cell entries.

You can also format the font style and alignment of the table entries. To display an entry in bold enclose the text with an asterisk (*), e.g. | *Rank* | *Page* | * Impressions* |. To align the text, enter one of the following letters directly following the opening pipe of a given cell without a space: c. to center the text, l. to align left or r. to align right.
Example: 
|c. 1 |l. Home |r. 1,333,000 |.

To link a cell entry to a page within the prototype, select the entry and choose the target page from the dropdown of the text editor, e.g. |r. [page3243 Home] |. To link to external content, insert the URL instead of a page ID.
Example: 
[https://pidoco.com/en/help/doc/stencil Stencil].

Notation specific for the table stencil (including formatinng)

Notation specific for the table stencil (including formatinng)

Hint: Don’t forget the space characters! Add one before and after each pipe. To leave a column blank, just put a space between two pipes (| |).

The formatted table stencil (in the Simulation View)

The formatted table stencil (in the Simulation View)

 

c) Unordered and Ordered List

In the List stencil each line represents one specific entry either marked by asterisks if you use a unordered list or by hash characters if you use an ordered list.

Notation specific for the ordered list stencil

Notation specific for the ordered list stencil

Hint: Don’t forget to add the space characters after the * or # !

The formatted ordered and unordered list stencil (in the Simulation View)

The formatted ordered and unordered list stencil (in the Simulation View)

 

d) Tree View

In the Tree View each line equals one category, sub- or even sub-sub-category. This hierarchy either starts with + or – , depending on whether a category is initially open (and can be collapsed, thus showing a – ) or closed (and can therefore be opened, thus showing a +). To add a new entry, go to the respective line and type in + or – at the beginning. Then add a space character and type in title of the entry, e. g. + Content. To link an entry to a page within the prototype, select the entire entry and choose the target page from the dropdown menu, e.g. - [page3243 Home]. Pasting a URL instead of a page ID will create a link to external content.
Example: 
++ [https://pidoco.com/en/help/doc/stencil Stencil].

Notation specific for the tree view stencil (incliuding internal and external links)

Notation specific for the tree view stencil (including internal and external links)

Hint: Don’t forget to add the space characters after the + or – !

The formatted tree view stencil (in the Simulation View)

The formatted tree view stencil (in the Simulation View)

 

That’s how easy it is to quickly turn menus and other stencils into interactive elements! Do you need help with the Pidoco syntax? Just send us a message via support@pidoco.com or
FacebookTwitter or Google+.

 

Happy Prototyping!

EU changes applicable VAT

As of January 1, 2015, European Union regulations, in particular the so-called “VAT Directive”, require that suppliers of electronic services such as Pidoco charge value-added tax (VAT) according to the customer’s country of residence (place where the recipient is established) instead of according to where the supplier is based. This applies for all our customers who are not based in Germany, but are a European taxable person (e.g. a non-business customer). If you are currently using Pidoco on a subscription and are not a business, i.e. you do not have a European VAT ID, this may affect you.

 

So what does this mean for me?

If you are currently using Pidoco on a subscription, are not based in Germany and have not supplied a valid VAT ID to us, your current plan will be subject to a different VAT rate starting on January 1, 2015 (unless your country of residence happens to have the same VAT rate as Germany). Any renewals after that date will carry the VAT of your country instead of the currently charged 19%, the VAT rate currently applicable in Germany. Unless you are using PayPal to pay for your subscription (see below), there’s nothing you need to do. We will automatically adjust your subscription and invoices at the first renewal on or after January 1, 2015. If you need to take any action, we will notify you in advance.

Sounds complicated? Here’s an example! Let’s say, you live in France and are on a Starter plan, which renews every month. Currently we are charging you VAT according to the German rate of 19%. So you are paying: 12.00 Euro + 2.28 Euro (19%) = 14.28 Euro. As of January 1, 2015, we will have to charge you according to the French VAT rate of 20 %, because you are based in France. Hence the invoice amount will change to: 12.00 Euro + 2.40 Euro (20%) = 14.40 Euro.

Of course, the new rates will also apply to any new purchases made on or after January 1, 2015.

 

Paying via PayPal? 

If you are using PayPal as payment method for your subscription you will need to authorize the new subscription value directly on PayPal before the next renewal of your subscription and will be notified separately via email.

 

Are you a business?

If you are a business and qualify for participation in the reverse charge scheme, you may supply us with your VAT ID number in order to be able to use Pidoco under the reverse charge scheme and avoid any VAT charges from our side. Please send your VAT ID to support@pidoco.com including your registered email address as well as your customer ID, which you can find on your invoices.

 

If you have any questions, please contact us at support@pidoco.com or +49 30 4881 6385.

 

Happy Holidays!

Your Pidoco Customer Service

How To … Create A Linkable Menu

The menu is a commonly used UI element that facilitates navigation through the pages of an application. The menu stencil is one of the core stencils in Pidoco. Today I want to show you how easy it is to create such a menu. So here is how it goes …

 

Step 1: Create pages

First, create the pages that the menu stencil will link to.

Screenflow showing a menu serving as navigation element

Screenflow showing a menu serving as navigation element

 

Step 2: Add menu stencil and content

Now add the menu stencil from the Stencil Palette and place it in the desired position. Usually, you will want to include the same menu on all of the pages it links to, so consider placing it on a layer. (Here: I placed on the menu on the layer called “Header”.)

adding_menu

Adding the menu stencil to a prototype

 

When dragging the menu to your page, the text field will open directly. But to edit the content you can also double-click on the menu. The menu stencil comes with a few default entries. Each line represents a different menu entry marked by asterisks. One asterisk represents the top level of the menu, which is visible at all times (e.g. * File). Two asterisks represent the first level of sub-entries, which are only visible when the user hovers her mouse over the menu in the simulation (e.g. ** New file). Three asterisks respresent sub-sub-entries, and so on.

You can add more entries to any level or replace existing ones using a new line and the right number of asterisks for each. Entries will appear in the order you specify, but at each given level, only the corresponding entries with the right number of asterisks will be visible in the simulation.

Hint: If you add entries to the top level (1 asterisk), you may have to resize the menu stencil to see all of them on the screen.

 

Step 3: Insert links

To link a menu entry to a page in your prototype select the entire entry with your mouse and choose the desired target page from the dropdown menu above. The dropdown includes all pages you have created so far. Selecting a target page will insert brackets ([ ]) around the menu entry (also called the anchor text) to signal that it is now linked up and add the ID of the target page after the opening bracket (e.g. page0001). Make sure not to introduce spaces between the target page ID and the bracket, erase page IDs or change the position of brackets and spaces when you edit the menu because this may break the links.

Linking up individual entries of the menu via the text field and the dropdown menu

Linking up individual entries of the menu via the page dropdown

 

Hint: You can also link to external URLs. To do so replace the target page ID with the desired URL, leaving the brackets intact. Be careful not to leave a space after the opening bracket.

 

That’s it. You have successfully created your first linked menu!

Do you need help with the menu? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

 

Happy Prototyping!

Looking back: Pidoco at Web Summit 2014

Every year at the beginning of November, Dublin becomes the international tech capital as the Web Summit takes place all over the Irish capital. This event is a real success story! It was first held in 2010 as a meeting of a few hundred Irish IT specialists and now is Europe’s possibly most influential technology event. This year, the Web Summit took place from November 4 to 6 and attracted 22,000 attendees from more than 100 countries.

But it was not only a simple conference; there were actually eight summits – the Enterprise, Machine, Marketing, Music, Builders, Sport, Night and Food Summit – grouped under the umbrella of the Web Summit. The Web Summit also included more events and stages like several startup and attendee workshops, roundtables, the center and library stage and the cinema. Additionally, there were more than 500 speakers, like Drew Houston (founder of Dropbox), Bono (lead singer of U2), Lars Silberbauer Andersen (Global Director of Social Media at LEGO), or Eric Wahlforss (co-founder of SoundCloud), Tony Hawk (Skater) or Mark Pincus (founder of Zynga) just to drop a few names. So we were very excited to be part of Web Summit and curious what to expect in Dublin.

The entrance of the Web Summit main hall.

The entrance of the Web Summit main hall.

 

After arriving in Dublin on Monday evening, we got a little sightseeing tour of the city using one of the coaches from the airport straight to our hotel. As it was our first time in this beautiful Irish capital, we were impressed by the skyline, the old and new buildings like the Trinity College, Dublin Castle or the Samuel Beckett Bridge and the Docklands as well as by the beautiful parks and statues, and of course by the friendly and cheerful Dubliners.

Dublin at night - The Four Courts.

Dublin at night – The Four Courts.

 

As the Web Summit started on Tuesday, we got there early to register and were welcomed by the friendly volunteers handing over our passes and wristbands including additional information and helpful hints. (The next day there were even volunteers welcoming visitors dancing to 80’s disco music.)

We basically spent Tuesday and Thursday in the various halls, strolled from stand to stand, had inspiring conversations with exhibitors from all over the world, met old and made new friends. And of course we attended some of the events, e.g. Tom Preston Werner presenting the project codestarter, Peter Thiel as well as Jules Coleman and Blake Mizerany talking about scaling a very small product up to a large product and keeping technology very simple. We were also really impressed by Leland Melvin, the former NFL player who later became an NASA astronaut. We would have loved to attend more presentations and listen to more impressive stories, especially as there were so many different topics and summits. Unfortunately, our schedule was so tight that we were not able to make it to many.

On Wednesday, we presented at the Builder’s summit and used the opportunity to extend our network as well as to talk to visitors and new partners. We had great conversations and received really inspiring feedback on the interactive features, we released this summer.

The Center Stage of the Web Summit.

The Center Stage of the Web Summit.

 

As the Night Summit was an official part of the Web Summit as well, we also explored Dublin at night and luckily ended up in the “right” pub on Wednesday to see the English rockers The Kooks, met up with friends and connected with new partners while enjoying the delicious Irish pub culture.

The famous Temple Bar.

The famous Temple Bar.

 

We had a great week in Dublin and were impressed with our very first Web Summit! So we really thank all of you, who visited our stand and contributed to Web Summit. A massive thank you also goes out to the organizers for creating this awesome event! We will definitely come back!

 

Here are some more impressions of our trip to Dublin:

How To … Create Useful Specification Documents

Prototypes are great blueprints for design and development, but sometimes you need a real specification document, which can include much more than just screenshots of your prototype, e.g. explanations, functional requirements and things invisible on the screenshot, such as interactive behavior. Pidoco allows you to generate such specification documents with only a few mouse clicks and gives you some powerful options. This post takes you through the set-up and export of your specification document.

 

Choosing the right document type

To generate a specification document start by picking the document format. To do so, open your prototype and select PDF Export or RTF/Word Export from the “Export” dropdown in the toolbar. Pick the PDF export if you want to generate a final, non-editable document, e.g. for final approval. Pick the RTF/Word option if you want to be able to edit the specification document later. The content will be the same in both cases and can be determined in the next step.

Export your prototype  using the "Export" button in the toolbar

Export a specification document of your prototype using the “Export” button in the toolbar

Hint: If you have your existing specification template, you can embed screenshots of your prototype pages as direct links that you can easily update via the respective function, e.g. in Microsoft Word or Powerpoint documents. You can find the respective links in the  “Share” dropdown in the toolbar.

 

Configuring the specification document

Next, a dialog window will open up and allow you to choose what parts of the prototype should be included in the specification document. You can select individual pages to include and opt to include additional information. To do so, simply toggle the respective boxes.

Select the parts to be included in the specification document

Selecting the parts of a prototype to be included in the specification document

 

Including Screenflows

Screenflows help you visualize processes (e.g. the log-in process of your website), demonstrate use case scenarios, depict hierachichal structures (e.g. a sitemap) or simply give the reader a quick overview of the pages your prototype contains.

If you have created screenflows and want to include them as screenshots in your specification, select this option. Screenflows are shown in the first chapter of the specification document in alphabetical order.

 

Example of a screenflow showing a log-in process as appearing in the specification document.

Example of a screenflow showing a log-in process as appearing in the specification document.

 

Including Pages

Usually, you will want to include some of all of the pages of your prototype, but you can also select just individual pages, for example if you have experimented with several versions of a page, but only need the winning candidate for the specification. Pages are shown as full screenshots in the specification document and appear in alphabetical order, grouped by folder. Pages appear in the second section of the specification document, right after the screenflows.

For optimal legibility, the screenshots are automatically scaled to full page width. Long pages may therefore be split up across two or more pages in the specification document.

Prototype pages listed under "2 Pages" in the specification document.

Prototype pages are listed under “Pages” in the specification document.

Hint: The Comment stencil lets you post notes into your prototype pages that are useful to explain details you don’t want or have the time to prototype. You can change their visibility in the specification document (and simulation) via the Context Menu.

 

Including Layers

If you are working with layers, you may want to include them in the specification document, for example to show which building blocks make up your prototype and are repeated in various locations. Layers appear as screenshots in the third section of the specification document, right after the pages.

Select “Include page -> layer references” to show all layers in use on a given page after each page in the pages section of the document. If you select “Include layer->page references”, you will find after each layer in the layer section of the document a list of all pages containing the respective layer. This can be very useful information for the developers when trying to understand how the software will work or deciding how to structure the code.

Layers are shown in the last section of the specification document.

Layers are shown in the last section of the specification document. The “Header” layer is used on six pages.

 

Including Page details

Including pages in the specification document (see above) will only give you the screenshots of the respective pages, but since the specification document is not interactive like the simulation, there may be some vital information missing. Imagine a dropdown menu: You will only see the first entry in the screenshot because the menu dropdown can only be shown in one state, but the developer will need to know all the other entries as well.

Page details let you add this type of information to the specification document by simply selecting the “Include page details” option. Page details include:

  • Information on interactive behavior, e.g. what happens when a link is clicked or when the user performs a certain touch gesture
  • Element configurations, e.g. contents of a dropdown menu or states of elements. This information can easily be copied from the document for reuse.
  • Annotations that ou have added to elements like individual stencils or entire pages via the context menu

Page details will be listed below each page in the specification document and referenced in the screenshots by small numbers (1, 2, 3, etc.).

Prototype pages listed under "2 Pages" in the specification document.

Page details are referenced on the page screenshots and provide information not directly visible in the screenshots.

Hint: To add annotations to an element, open the context menu and type into the text field at the bottom.

 

Including Discussions

Discussions containing feedback and change requests or further information can be displayed in the specification document, too. This helps you visualize the progress of the project and document the decision-making process. It can also be immensely helpful in resolving arguments with clients about who requested a change or why a certain feature was implemented in this particular way. Discussions will be references as letters in the screenshots of the respective pages (A, B, C, etc.).

 

Start a discussion in the Simulation View

Discussions can help track and document change requests and decision processes.

 

Confirming

Finally click on the “Send” button and, depending on the size of your prototype, you will receive the specification document a few minutes later after the automatic download has been completed.

Message displayed when the download of the specification document starts

Message confirming the successful generation of a specification document

 

You can customize your specification document to the needs of the different recipients. A client may need different information to sign off on a concept or approve a budget than the developer writing the code, so it can be useful to include only selected sections in the specification document. Whatever configuration you choose for your specification export, Pidoco will remember your last setting, so you won’t have to redo it every time. Once, you have your document set up, one click on the “Export” button in the toolbar will suffice to generate your spec.

 

That’s it! You have successfully created your first specification document!

 

Do you need help with your specification document? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

 

Happy Prototyping!

How To … Create a Linkable Combo Box

The combo box is a common UI element used in many websites and software applications. This post explains how to quickly prototype a combo box that links to different pages depending on which entry is selected. Here is how it’s done in three simple steps…

 

Step 1: Create prototype pages

First, create the page that will contain the combo box as well as the pages that the combo box will link to. Here’s an example prototype of a web shop where the combo box is used to navigate to the pages “Products” and “Solutions”:

Screenflow of “Products & Solutions”

Screenflow showing a combo box serving as navigation element

If you want the combo box to be displayed on more than one page, consider placing it on a layer.

 

Step 2: Add entries to the combo box

Next, add the combo box stencil from the Stencil Palette and place it in the desired position. Double-click on the combo box to edit the entries, e.g. using the names of the target pages.

Adding the Combo Box to the prototype

Adding a combo box stencil to a prototype

 

Step 3: Define interactions

Finally, we need to add interactivity to the combo box. To do so, open its Context Menu and click on the Interactions tab. In the Interaction Dialog, choose “changes the selection” as the trigger in the first column and select the entry you want to link up under “Value”. In the second column select “show page” as the reaction and select the page you wish to display. Then hit “Save” and repeat for every entry of the combo box you wish to link.

Adding the "changes the selection" interaction to a prototype element using the interaction dialog

Linking up individual entries of a combo box using the “change selection” option of the interaction dialog

 

That’s it! You have successfully created a linkable Combo Box!

 

Do you need help with linkable combo boxes? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

 

Happy Prototyping!

Top 5 Alternatives to Usability Tests

Usability tests are often perceived as the necessary evil or even worse, they are ignored. This disrespectful treatment has many reasons. Sometimes the project schedule is so tight, that there’s no time to properly test the new website or app before their release. In other cases, decision-makers think that usability tests are too expensive and that necessary fixes can easily be done afterwards. Even where the latter is true, it usually is many times more expensive, time consuming and might result in a painful initial loss of dissatisfied customers. Since we at Pidoco believe that usability testing is an essential part of the development process, we have compiled a list of the top 5 alternatives to classical lab-based usability testing that may work for you, even if you’re on an extremely tight schedule or have no usability budget.

Usability tests can be done quickly and simply.

Usability tests can be run anytime and anywhere without being cost- or time-intensive.

 

1. Remote Usability Testing

Remote Usability Tests are quite similar to traditional usability tests. The main difference is that the test is not performed in a research lab and researchers and testers do not have to be in the same physical location or even in the same time zone. Instead, they participate using various online tools like web conferencing and screen recording solutions to communicate or document test sessions. One of the great advantages of this method is that the test users can complete a remote usability test while remaining in their natural environment, i.e. in their office or at home. This provides a more realistic testing scenario than a test lab. In addition, scheduling does not depend on lab availability; instead tests can be conducted whenever and from wherever is most convenient. In order to participate, test users typically receive a web link from you to a target page, which gives further instructions on the test including tasks and questions. The website or prototype to be tested is typically also hosted online. Usually, the test session is recorded in order to document the actions and comments of the participant for later analysis. While this type of test does not require a lab, it does depend on a reliable tool set, including a web conferencing and/or phone system as well as a functioning screen recording setup, if you would like to record the sessions. It is key that the tools can easily be operated by your test users and that they can easily access the test object.

You can conduct two different kinds of remote usability test: moderated and unmoderated. Running a moderated remote usability test means that the participant and test moderator are in direct contact during the test session, e.g. via phone or a web conferencing solution, much like in a lab setting. This facilitates communication (e.g. via phone or chat) and allows for direct feedback and help, if necessary. The test moderator can explain tasks or ask questions to gain more insights while the participant can “think aloud”, voicing his intentions or expectations and feelings vis-à-vis the product. During an unmoderated usability test, the participant works independently and has to complete the tasks without direct input from the test facilitator. In this case, there no real-time support or direct feedback is available.

Read more:
Remote usability tests: Moderated and unmoderated by Amy Schade
A moderated debate: Comparing lab and remote testing by Susan Fowler

 

2. Heuristic Evaluation

Another option is the expert review. This systematic inspection of your product typically requires usability or UX specialists, who are mainly offer their expertise as consultants or via research center. During their work, the experts typically use and click through your website or mobile application like your target group would do, assuming the perspective of a typical user. For this, the researchers work on their own and in their offices or if necessary own testing laboratories. During the testing session, however, they pay particular attention to the details of your product and compare them with accepted best practices – the usability principles (heuristics). This heuristic evaluation is mainly based on the expert knowledge as well as on the latest human factors publications.

In their review, experts analyze a website’s or application’s

  • language and style for simplicity, natural flow and native use,
  • structure for consistency and logic,
  • help sections, error and help messages as well as documentation for clarity and intelligibility,
  • instructions and applicable shortcuts for clarity and findability.

Based on their findings, the reviewing experts typically finish their evaluation with a written report describing problems in terms of their severity using dimensions like frequency (How often does the problem occur?) and persistence (Is it possible to work around the problem or to solve it?) as well as the issue’s impact on successfully completing a task. Finally, the experts end their review by presenting recommendations and potential solutions to overcome the usability issues.

Read more:
Heuristic evaluations and expert reviews by usability.gov
Expert review: alternative to usability testing? by User Intelligence

 

3. Quick & Dirty Tests

As the name already suggests, a quick & dirty usability test can be run quite simply and quickly and helps you review the usability or design of your product or an individual feature you are about to add to your existing product. At first, you can conduct a quick test yourself, if you critically review your own work. To do so, e.g. open your prototype and “naively” click through it like you would do when using it for the very first time. As this unbiased view is difficult to achieve, in a next step you can ask one of your colleagues, whether or not she is involved in the development process, to have a look at your prototype for a few minutes. Show her your work and see what happens. Pay particular attention to

  • how your “test user” responds to your prototype,
  • what she does, and
  • what she expects to do with your product-to-be.

Doing so, you will receive a first internal review, which will usually help you to detect major inconsistencies, errors and even to get positive feedback. It’s up to you to decide whether you want to sit next to your tester while she is examining your product, record the test session, simply make a few notes or whether you leave it to your tester to give you a brief feedback (either in writing or in a conversation). For this type of test, you will need no test lab, no expensive tools and no recruiting overhead. There is no limit in running quick tests as they are neither cost-intensive nor time consuming. But even one session can help you to improve your work and to have a better product at the end of the development process.

Read more:
Quick and dirty usability testing by Leah Buley

 

4. Guerrilla Usability Testing

Guerrilla usability tests are similar to classical usability tests, but require no test lab and make do with a minimalistic set-up. The idea is to cut down overhead and required time by catching testers of your target audience where they are likely to be found, e.g. in a coffee shop, a store or at an event. This works especially well when designing for the mass market, but can work with more special target groups depending on the context, and, of course, requires a more or less mobile set-up, often consisting of just a notebook with a screenrecording software or a video camera to tape the testers. Guerrilla tests are more informal than classical usability tests and aim at quick feedback, allowing for frequent testing throughout the entire development process. Guerrilla testing can be used to test almost anything – from sketched concepts to fully interactive prototypes to physical products – and works quite well, if you want to quickly validate your current work.

Depending on the product in question, you can even run guerrilla tests with coworkers or colleagues at the cafeteria. The test itself follows classical testing: The test facilitator will sit next to the participant, explain the task(s) and take notes (or have an assistant take notes) while the test user talks aloud as she clicks through the site. Like quick tests, this comparatively inexpensive way of testing can be used anytime throughout the whole development process and is an easy way to receive direct feedback on your product.

Read more:
The art of guerrilla usability testing by David Peter Simon
Changing the Guardian through guerrilla usability testing by Martin Belam

 

5. Contextual Interview

While the previously mentioned usability testing methods can be used regardless of whether you are testing a pre-release prototype or an existing product, the contextual interview is most helpful when doing research on an existing website or app as basis for a re-design project or a planned feature addition. It is therefore more of a user research method than an evaluation method, but may be used as such or combined. During a contextual interview, the test users remain in their natural environment while the researcher sits next to them and watches them work with the product. Unlike in formal usability tests, the test subjects usually do not complete carefully designed tasks, but rather use the product in the context of their everyday tasks, e.g. while at work. This enables the researcher to learns about things like

  • the general use of the product,
  • the issues the tester faces,
  • which technical equipment is used,
  • how long it takes to complete a task,
  • the environment the user works in, or
  • the actual purpose for using the product.

The researcher can choose to only observe or ask additional questions to clarify or complement his observations. Of course, you may combine the contextual interview with traditional user tasks to be able to compare test sessions more easily, allowing the user to try out some things on his own and to complete specific tasks.

Read more:
Contextual Inquiry by usabilitynet.org
Contextual interview by usability.gov

 

Happy Testing!