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!

How To … Play a Sound?

Whether it’s a game, a music app or the alert function of your favorite social media app – sounds are an essential part of modern applications and can significantly affect user experience! That’s why with Pidoco’s Extended Interactions, you can now add sounds to your prototypes.

A while ago, I created a mobile prototype called “Fortune & Destiny”, which is an interactive dice and cards game. To create a realistic playing atmosphere, I added a few sounds. Below, I’ll show you how its done…

 

Step 1: Select a trigger element and add an interaction

To play a sound in your prototype, you need an element that will trigger the sound. For example, you may want to play a sound when a certain button is clicked. That button will be the trigger element, to which you will need to attach the sound. You can also tie a sound to a page or a layer.

So, first find and select the trigger element. In this example I attached the sound to a page. This is done via the Context Menu of the trigger element using the “New interaction” option in the “Interactions” tab. Clicking “New interaction” opens the Interaction Dialog, where I specified the interaction “When the user shakes the device then play a sound” using the two dropdown menus at the top.

Adding a sound interaction to a page using the context menu

Adding a sound interaction to a page using the context menu

 

Step 2: Upload a sound

Once the sound interaction has been added to the trigger element, we can upload the sound file.  To do so, click on the “Upload” button to select the desired sound file from your local or external drive. (Please note: only MP3 files are supported.)

Uploading a sound from the local drive via the Interaction Dialog

Uploading a sound from the local drive via the Interaction Dialog

 

Step 3: Choose a sound and save

Right below the “Upload” field, you will see a list of all sound files you have uploaded. Now all you have to do is choose the file to be played (to preview the sound, simply press the “Play” icon next to the file), set the duration and decide if there should be a delay. At the end, don’t forget to click “save”.

Choosing a sound via the Interaction Dialog

Choosing a sound via the Interaction Dialog

 

By the way, if you want to apply the same sound to multiple trigger elements, you don’t have to repeat all steps! Simply select the first trigger element that already has the sound attached as well as any other elements that should use the same sound, open the Context Menu, and select the Interactions tab. Here you will find the “All” icon to apply this interaction to all the selected elements.

Apply this interaction to multiple elements

Applying an existing interaction to multiple elements

 

That’s it! You have successfully created a prototype that can play sounds!

Do you need help with adding sounds to your prototypes? Just send us a message via support@pidoco.com or FacebookTwitter or Google+.

 

Happy Prototyping!

Pidoco gets a facelift

At Pidoco we constantly work on improving our tool and listen to your feedback in order to deliver you a great prototyping experience! That is the reason why we are bringing you some new exciting features today, including a bigger canvas, an improved toolbar, and a modernized look! With this facelift, prototyping will be even easier and faster. So what is new?

Brighter UI, Less Clutter And A Flat Design
First off, we have given the Page View section of Pidoco a brighter, more modern look by removing unnecessary UI elements and flattening the design. This makes it easier to navigate Pidoco and makes work more comfortable for your eyes because there’s less clutter. In fact, the entire look of our tool has been simplified, which will help you to find things more easily.

The new UI allowing for a more efficient prototyping

The new, cleaner UI features a flat design and allows for more efficient prototyping

 

More Work Space
Many of you work on large screens, but some do not. So we took a look at how to improve the prototyping experience of those working on smaller screens. As a result, you can now collapse the My Global Layers and My Interactions panel in order to enlarge the work space of your Editing Panel. Just click on the little arrow to hide or unhide the panel. While we were at it, we also shortened the names of the panels to “Layers” and “Interactions”, respectively.

Collapsible layers panel

Collapsing the layers panel increases work space

 

Improved Usability
With the design changes we have also given our Toolbar a makeover. Now it wows with shiny new buttons that are both larger and easier to click and feature a text label that makes their functions more obvious, saving you time looking for the right button. We also updated our icons to make them even more intuitive. The most important buttons “New” and “Simulate” have been highlighted for you in green and orange.

The new toolbar including new icons

The new toolbar including new icons and text labels as well as highlighting

 

Smart User Support
Pidoco offers a number of great features that are not always obvious at first glance. To make them more easily accessible to you we have improved our tooltips that give you hints on working with Pidoco. When editing your prototype, little hints and tricks will be displayed in the top right corner to facilitate your work with Pidoco. But if you already know what you are doing and don’t need those hints anymore, your can now turn them off.

Hideable help section

Hints make “hidden features” more easily accessible but can be turned off if not required

 

So, what do you think about the design update? Drop us a comment here or via Facebook, Twitter or Google+ or contact us via support@pidoco.com. We are looking forward to hearing from you!

By the way, did you know that you can submit your feedback and ideas in the Pidoco Forum, too? Simply make a suggestion and all other users can vote on it. Our developers will comment and keep you updated on the status of your suggestions.

Happy Prototyping!

You are not a Pidoco user, yet? Why not register for a free 31-day trial today!

How To … Prototype Location-Based Services?

I have already introduced you to sensors embedded in mobile devices, of which GPS and accelerometer are most commonly used. Especially location-based services (short LBS) make use of them. One example for LBS is an interactive city guide, but you may know some of these, too:

  • “Find Me” or “Where am I” services (finding nearby restaurants, shops, ATM or apps detecting your current position etc.),
  • social networking services (add location to uploaded picture or in your chat),
  • locate services (integrated in emergency services),
  • interactive location-based games.

In this post I want to show you how to prototype location-based services.

 

Creating a prototype for a location-based service

To show you how to create an LBS prototype, I will use an example prototype for a smartphone app which I call “Berlin UX Guide”. It contains a map of Berlin and various tourist and UX hotspots marked by little icons (sights). You can click on every sight on the map to open a little pop-up with information about the respective sight. In addition, if you have your GPS activated and walk through Berlin with the prototype, the pop-ups will also automatically appear when you come near a sight. This is the LBS part of my prototype. So, let’s have a look at how to create this location-based prototype…

 

Step 1: Create the sight pages

As always, we start our prototype by building the basics including the various pages. In my example, the prototype basically consists of a map page and a little “pop-up info page” for each sight on the map (sight pages). The little pop-up pages will be displayed as an overlay on top of the map page. In addition, there’s also a start page when the app opens up, which I will not describe in further detail here. Here’s an overview of the pages we need:

Screenflow of "Berlin UX Guide"

Screenflow of “Berlin UX Guide”

Let’s start with the the first sight page. Create a new page and adjust the page size via the Context Menu of the page using the width and height parameters in the Properties tab. Pick a size that is smaller than the screen of the smartphone but large enough to disply the necessary information. I have chosen a width of 300 px and height of 240 px.

Context Menu of a Page to Edit the Properties

Editing the page properties using the context menu

Now we can add content to the overlay, e.g.

  • name of the sight,
  • address,
  • short description,
  • rating scale, and
  • contact details (website, telephone number as well as links to social media).

Don’t forget to add an option for closing the pop-up, e.g. an “X” at the top right. Voilà, the first sight page is done! Repeat for every sight you wish to include.

 

Step 2: Create the map page

Now we need to build the map page, which consists of a map image and icons marking the respective sights. First, we need to create a new page. Use the “smartphone landscape” option to generate a page suitable for a full smartphone screen or manually reset the page size if necessary. Next, we need the map itself. I’ve taken a screenshot showing a map of Berlin’s city center in this example. Upload the map via the image upload dialog and insert it as a page background.

Upload your image to the prototype

Upload your image to the prototype

 

Select your background image via the Context Menu of the page

Select your background image via the context menu of the page

 

Now add icons to mark the location of the individual sights. In my example a star represents a tourist sight and a flame an UX hotspot. Both icons can be found in the Stencil Palette under Symbols (expand to see all).

Icons of the "Berlin UX Guide"

Icons of the “Berlin UX Guide”

Your finished map page may look like this:

Map of Berlin including already created sights and UX hotspots (simulation view)

Map of Berlin including various tourist sights and UX hotspots (simulation view)

 

Step 3: Link overlay and map

Now we have all the basic building blocks in place, so it’s time to link our pages up. To display the sight pages as overlays we will use the “show overlay” reaction. For each sight icon add the following interaction: Open the Context Menu of the icon and click on “Add interaction”. In the Interaction Dialog, select “taps” as the user action and “show overlay” as the system reaction. Then select the desired sight page from the “Content to show” dropdown as the content to be shown. The selected sight page will be shown as an overlay centered on top of the map page in the simulation.

Add an Interaction to Show Overlay

Adding a “show overlay” interaction to a prototype element using the interaction dialog

Here’s what the simulation will look like:

The map of the "Berlin UX Guide" and an opened overlay for the Brandenburger Tor (simulation view)

The map of the “Berlin UX Guide” and an opened overlay for the Brandenburger Tor (simulation view)

To allow the overlays to be closed, add the following interaction to the “X” on each sight page: When the user “taps” then “hide overlay.

Adding a "hide overlay" interaction using the interaction dialog

Adding a “hide overlay” interaction using the interaction dialog

 

Step 4: Add GPS

Finally, let’s integrate the location data so that the pop-ups can be triggered when the user arrives at a sight. To do so, go back to the map page and add the following interaction to each sight icon: Open the Interaction Dialog and select “changes the location” as the user action. Location changes can be triggered when the user enters or leaves a certain spot. As the overlay should appear when the user approaches the sight, select the trigger “enters” and zoom into the map until you have found the correct location. Mark the location by clicking on the map and setting the location radius with your mouse. Then add the reaction “show overlay” and select the desired sight page from the “Content to show” dropdown. To notify the user when sight information is displayed, let’s also add a “vibrate” reaction. (Here: I have chosen a duration of two seconds.)

Add two reactions to a tap action

Add two reactions to a tap action

That’s it! You have successfully created an interactive prototype that can simulate location-based services!

Do you need help with adding location-based interactions to your prototypes? Just send us a message via support@pidoco.com or Facebook and Twitter.

 

Contributing to the Berlin UX Guide

The Berlin UX Guide is designed as a community project uniting city explorers and UX experts. If you want to add a sight or new UX hotspot send an email to support@pidoco.com including your Pidoco user name. If you don’t have a Pidoco account yet, just register at pidoco.com/free. We will send you a collaboration invitation which will allow you to add new pages to this prototype.

Start Screen of the Berlin UX Guide

Start screen of the “Berlin UX Guide”

 

 

PS: If you would like to read more about location-based services for mobile devices and, have a look here:

“A New Map Gives New Yorkers the Power to Report Traffic Hazards” by Sarah Goodyear

“Advanced Location-Based Technologies and Services” by Hassan A. Karimi

“Location-based Services” in Porlaris Wireless”