Posts from "November, 2014"

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!