New Release: Speeding Up Your Prototyping

Brand new elements

Hooray! We’ve been thinking about adding this feature for a while now – and here it finally is: With our December release we are adding a new section to the stencil palette which will contain a large selection of new elements to give you a head start on your projects.

Instead of beginning your projects from scratch, you can browse the new palette section to find exactly the right building blocks you need to get your prototype off the ground in no time. The building blocks consist of groups of stencils that can serve as a starting point for your designs, ranging from simple navigation patterns (e.g. toolbars, tab bars, menus) and various types of forms to full screen templates (e.g. login page, search results page, profile page).

New: Add pre-designed templates to your project

New: Use our pre-designed building blocks to jump-start your project

You can’t find what you are looking for? No problem! Send an email to support@pidoco.com and we will try to add it.

 

Custom Stencils now are Masters

Did you know that you can turn any stencil or group of stencils into a re-usable asset that can be managed and edited in one location? Imagine you have just built the perfect login form and want to re-use this form across various screens in your project. You could copy and paste it every time, but if the form changes, you would have to touch every screen again. Why not create a master form that you can re-use on various screens, and any change you make to the master will update all the screens automatically? This feature – thus far known as “Custom stencils” to Pidoco users – will be renamed to “Masters” and be available for the new templates as well. So you can pick any template, edit it to suit your specific needs, then turn it into a master that you can update across the entire project with one simple action. Learn more about masters…

Renamed: Custom stencils are now Masters

 

New toolbar design – more canvas space

While we were at it, we also redesigned an important part of Pidoco – the toolbar. We took out some fluff, made it simpler, and in the process freed up a lot of space for you to work more efficiently. With the gain in canvas space, you can expect to be even faster with your prototyping! Try it out…

Re-designed: the new slim and simple toolbar

Re-designed: More space for your designs with the new toolbar

 

Let us know in the comments what you think or email us at support@pidoco.com!

Prototyping the right way (introduction to effective prototyping – part 1)

This is the first of several blog posts on application prototyping. The series is aimed at prototyping beginners that wish to get a quick start into the field and gain a better understanding of what they should be paying attention to when prototyping.

 

What is prototyping?

Prototyping is a well-established product design and development method used in various fields from mechanical engineering to software development. Prototyping involves creating partial realizations of a planned product that are used to gain early insight into technical feasibility, user needs, and market preferences, by soliciting feedback from various stakeholders, such as end users, developers, engineers, marketers, and domain experts. The ultimate goal is to minimize risks arising from areas like implementation, production, market acceptance or even customer support by spotting potential problems early on.

Aside from reducing project risk due to their early availability, common additional advantages of working with prototypes include:

Iterative refinement: Since prototypes are often comparatively inexpensive to produce (they can omit certain functions or details or make use of cheap materials), you can create and compare several possible design variants or do multiple design rounds in order to refine the product design step by step with intermittent user feedback.

Time-to-market: One of the key challenges of software development is “getting it right”. Some of the most time-consuming activities occur at the end of the implementation stage and involve the correction of mistakes that occurred because of incomplete or unclear specifications. The more feedback and testing occurs during the design process, the more specification-solution gaps are discovered and filled, helping cut rework time.

Cost savings: Design faults that are caught at an early stage in the design process are usually much cheaper to correct. In software development, the difference between concept and implementation stage may constitute a factor 100 in cost.

Quality improvement: Multiple rounds of evaluation using prototypes can lead to dramatic improvements in product quality, which in turn may have a serious impact on support costs (e.g. fewer calls to the support desk) and market success (more customer acceptance).

Ownership: Prototyping allows users and other stakeholders to participate in the product design process, thus creating emotional attachment and goodwill towards the final product.

In this and the following posts, we will focus on prototyping of software applications, more specifically on UI prototypes, i.e. partial realizations of the user interface of a software application, such as a website or a mobile app. UI prototypes are usually concerned with the user experience (UX) in general or the conversion in specific, i.e. how efficient a website or app is at leading users to taking a desired action, such as purchasing a product or registering a user account.

Prototyping is a key element to the success of the well-accepted iterative development process and usually consists of creating and evaluating several iterations of successively refined prototypes that evolve based on new insights gained along the way.

User Centered Design Process

Refining designs using multiple rounds of creating and evaluating prototypes (iterative user centered design process according to ISO 9241-210 standard).

 

Take, for example, a new mobile medication reminder app for senior citizens. Key features might include an automatic reminder when pills need to be taken as well as adding a new medication to the schedule by simply taking a picture of the packaging and setting the frequency and/or time. Leaving aside all technical and financial risks (e.g. can we build a system that will be able to identify a medication based on a simple picture taken, within our target budget?), you might start with just a simple sketch on paper, show it to lead users from the intended target audience to see if they understand the app and can easily use it (i.e. whether the product is “usable”), then work the feedback into the next version and test again. For this next round, you might already move on to a digital representation with some more details using a prototyping tool. In later versions, you might add more detailed visual design elements to test user preferences and assess whether potential buyers would actually be willing to pay for your app.

Early-stage prototype of a medication reminder app

Early-stage prototype of a medication reminder app

Prototyping isn’t a rigid process, though. It must be tailored to the specific needs of the project at hand. In the next sections, we’ll explain how.

 

How to use prototypes?

There are various prototyping techniques for different purposes and different stages of the design process, each offering their own advantages and each with certain limitations. Prototyping is done in a certain project context and is usually a trade-off with other tasks in terms of time and money spent. You should decide on a case-by-case basis how much effort you want to spend on prototyping in order to ensure that your prototyping activities will yield an overall benefit. In general, you should spend as much time as necessary, but as little as possible. If the overall project risk is small, prototyping should not eat up a lot of your budget. If, on the contrary, there are lots of uncertainties in your project, you should plan on prototyping more.

The following two parameters can be adjusted in each prototype to make the best use of available resources such as time an money:

Scope: Prototypes only represent a certain part of the product. In software development we can distinguish between horizontal prototypes that comprise several or all features at the same architectural level (such as UI prototypes) and vertical prototypes that consist of a fully functional implementation of only one single feature including the UI, logic and data levels. In addition, prototypes can of course selectively focus on only a certain subset of all features that pose a design challenge and omitting those that are obvious.

Fidelity: Prototypes usually use a certain amount of abstraction to guide attention to the most important aspects of a design problem. This means that prototypes usually omit certain details. Especially in the early stages of product design prototypes are often less detailed (low fidelity or low-fi), focusing on the overall concept or on specific risk factors. For example, an early-stage prototype of a mobile app may entirely abstract from visual design (e.g. colors, fonts) and focus solely on the layout of each screen. Abstraction often helps understand issues better since the amount of information that needs to be processed is lower. Of course, abstraction may also lead to an incomplete understanding of an issue or over-simplify a complex problem, so it is sometimes necessary to use very detailed prototypes (high fidelity or hi-fi). There are several dimensions of fidelity, including among others visual details (black/white vs. grey scale vs. color) or responsiveness (interactive vs. static) or data type (lorem ipsum text vs. dummy data vs. real sample data).

Interactivity: Prototypes can be static representations that merely give a visual impression of the user interface or allow the viewer to interact with them to get a sense of the look and feel. Interactions can range from simple clicks or taps that bring up the next screen (much like a slide presentation) to sophisticated simulations of system behavior that distinguish between various triggers (e.g. swipe gesture vs. double tap) and are able to precisely show how the future product would react to them (e.g. transitioning to the next screen by fading the old one out). This can be important when running user tests to identify potential usability issues.

Material & Tools: Finally, prototypes can be produced in a variety of ways. The biggest difference is between so-called paper prototypes, which are more or less sophisticated visual representations drawn on sheets of paper and possibly cut out to obtain tangible “interactive” elements, and digital prototypes that can be used on a computer or handheld device and as such are much closer to the final product. Digital prototypes can be created using anything from a design tool to specialized prototyping tools or can be directly coded or even done in a presentation tool like Powerpoint. This last parameter is primarily a question of preference or contextual restrictions (what tools do I have available, which tools am I comfortable with, are my testers onsite or do I need to “send” the prototype) and will not concern us further.

When you are working on an entirely new app, you may want to think about the general user flow and look at the bigger picture at first. In this case your scope should be relatively large, perhaps covering the most important user stories, but you will probably get away with omitting certain details at the screen level (low fidelity) and not worry about your prototype being interactive. In fact, these details may be entirely inconsequential at this stage. If, on the other hand, you are trying to work out how a certain feature should work at the interaction level, a single screen or two with lots of details and exact simulation of system behavior might be what you need, so your scope should be extremely focused while you will be working towards a higher level of fidelity and interactivity.

Of course, each parameter has a scale and depending on how these parameters are set, we can distinguish different types of prototypes:

Sketches (hand-drawn, low-fi, static): Sketches (also sometime referred to as “scribbles”) are very early, rough (low-fidelity), hand-drawn static representations of a future product. Usually, they are preliminary outputs to a first concept and used for ideation rather than actual feedback. While we list them here for completeness, we would argue that they are not really prototypes, since they are too far from being a “partial implementation”. Sketches can, however, be the basis for paper prototypes.

Paper prototypes (analog, low-fi, static to semi-interactive): Paper prototypes are easy to create and don’t require any specialized tools. Paper, pencils, scissors and some tape or glue are usually sufficient. They are also very flexible and can quickly be redesigned on the fly, even during a user test or workshop. On the other hand, they can only offer a very limited idea of the interactive behavior of a product (e.g. menus can be simulated by rolling out a folded strip of paper with the menu items written on it by hand) and cannot be easily modified, i.e. changes require creating a new prototype (or part of it). Usually they are hand-drawn and low-fidelity, unless printed designs are used as basis.

Wireframes (digital, low-fi, static): Wireframes are relatively easy to create, but do not include any visual design (low-fi). They are static representations of the product that focus on the layout of each screen and how the screens relate to each other. Wireframes are usually created using a graphics/drawing tool or specialized wireframe tools like Pidoco that are often more efficient or easy to use and allow for easy adaptation of the wireframes to changing requirements and user feedback.

Interaction/UX prototype (digital, low-fi to medium-fi, interactive): Interaction or UX prototypes simulate the human-computer interaction, i.e. how the application reacts to user inputs. They are interactive digital representations of the product and as such usually require more effort and time than, for example, simple wireframes, even though they usually do not include full visual design. Specialized tools are recommended, although sometimes readily available office software can do an ok job.

Design comp/mockup (digital, hi-fi, static): Mockups are static representations with near-finished visual design, but without interactivity. They are typically relatively time-consuming to create and require specialized graphics tools, which is why they tend to be used towards later phases in the design process when basics like structure and layout of the application have been sorted out.

Hi-fi prototype (digital, hi-fi, interactive): Hi-fi prototypes combine advanced visual design with simulated or even implemented human-computer interaction. Due to the high level of detail they are very time-consuming to create, but may evolve from earlier prototypes by linking up existing mockups or adding visual details to interaction prototypes. Hi-fi prototypes require specialized tools or can be implemented programmatically using HTML or other programming languages if such skills are present within the design team.

 

When to use which type of prototype?

Here are some common scenarios where prototypes can be helpful and some recommendations on how to get the most out of them.

Internal communication within the design/development team (exploration)

How can a prototype help?

Capturing an idea – especially an innovative one – in words, so that others can easily understand it, is often very difficult. Words evoke associations and it is likely that ten listeners will form ten different thoughts in their head. A visual representation in the form of a prototype helps manifest the idea and prevent misunderstandings in the early design phases. In addition, prototypes are “tangible” design artifacts that allow for a hands-on experience long before the final product becomes available for testing. Finally, they also help document progress and foster better discussions, since laymen can easily join the discussion, even if they don’t understand the design lingo or have no tech background.

What should the prototype look like?

The focus here is on exploring the design space, discussing ideas, coming up with – often innovative – solutions to key design problems, and expanding the solution space with controversial or unconventional approaches. Since these internal discussions occur among people familiar with both the general subject matter and design process as well as the specific project, prototypes can be less detailed. This means, you can work with a lower level of fidelity, working with placeholders instead of real images and copy, or omitting, for example design elements like branding or even color altogether. You should focus on core design issues and avoid wasting time on obvious parts of the design. By setting the right scope for the prototype, you can not only save time, but also focus the discussion on certain topics while steering clear of things you currently do not want to speak about. Interactivity can plan a role at this point, but often static or simple “clickthrough” wireframes will do the job.

Low to medium fidelity prototype

Low to medium fidelity prototypes or wireframes are great for early-stage internal communication

 

What to watch out for?

It is easy to get carried away with your idea, especially when the prototype allows you to quickly make headway. But the entire idea of a prototype is that it can still change according to feedback (or even be scrapped entirely). So, don’t get too attached to your initial prototypes – they will change! Attachment may easily lead to improper decision-making. As a hint, try to keep it simple in the beginning: don’t spent too much time, don’t go into detail, use low-fidelity prototypes. And be open for honest feedback. It (almost) always makes your product (and your team) better.

Fidelity: Low – medium

Scope: Focused

Interactivity: Not a must

 

External feedback, e.g. usability testing (evaluation)

How can a prototype help?

Prototypes are concrete representations of the future product, which can help gather more reliable feedback from real users. Seeing a prototype and/or interacting with it gives a potential user much more context than just an oral or written description. In particular, a prototype helps validate or invalidate implicit assumptions the test subject may have about the final product.

What should the prototype look like?

The goal of gathering external feedback is to detect usability problems or to answer a specific question (e.g. “which navigation option works better?”), sometimes openly, sometimes implicitly through observation of users completing assigned tasks. Therefore your prototype should be optimized to answer that question. Depending on how familiar your test subjects are with product design, how much opportunity there is for explanations (are you doing a moderated or unmoderated test?), and what your test goal is, your prototypes should be self-explanatory and detailed enough for the evaluating person to understand them. Include as much detail (fidelity) and interactivity as necessary, but keep it as focused as possible. E.g. if you are trying to get feedback on the user flow of an app (scope), don’t bother with minutiae of the individual screens and keep the interactivity simple. If you are trying to figure out the best way to design a specific feature, don’t bother with unrelated features, but do take time to model the details of specific interactions if they matter. In general, if you are testing design variants, only vary one variable at a time – otherwise you will not be able to gauge accurately, which variation caused the difference in results. On the other hand, include all options (affordances) that may distract or mislead the user, if you are testing your design for usability issues. If your question depends on the visual design (e.g. color codes or button contrast), include visual details. If branding (e.g. logos, brand colors, specific UI elements) is critical, include it; if your question is independent of branding, leave it out to save time. In general, for a real usability test, we recommend starting with a simple low-fidelity interaction prototype and adding visual fidelity to the extent required.

Prototypes for user tests should be optimized to answer the specific research question at hand.

 

What to watch out for?

Prototypes are not the final product and hence require the recipient to use some level of abstraction. If possible, give the test subjects some background as to what the goal of the prototype is, e.g. are you looking for feedback on layout, conceptual questions, the user flow, a comparative rating of different solutions to a design problem, or the visual design of the product. Also, tell them the limitations of the prototype so they know what to expect. Prototypes are great for focusing on certain aspects of the product design, but if you don’t tell the testers what feedback you are looking for, you risk getting the wrong kind of feedback – or flat-out rejection. In general, focus on a small number of questions or tasks. (Find more information on user testing here.)

Fidelity: Medium – high

Scope: Depends on question at hand

Interactivity: Simple – Detailed (depending on test case)

 

Requirements engineering (specification)

How can a prototype help?

Enriching a specification with visuals helps keep risks and overhead at bay. A written specification can never be complete (at least, it would have to be excessively long) and therefore often forces developers to make assumptions or guess the intention of the author, leading to potential missteps, or ask lots of questions, which takes time. A picture, on the other hand, as the saying goes is worth a thousand words, due to its richness of information. Therefore it can convey lots of information in a very concise manner.

What should the prototype look like?

The goal of a prototype used for specification purposes is to give the developer(s) a detailed picture of what they need to produce. Prototypes should be complete, but there is usually no need for a finished design, as this is typically provided separately by the designer. In particular, the prototype should contain all details necessary for implementation, such as the layout of the screen (where possible with exact dimensions), any graphics inputs (such as logos, image files, etc.), links between screens, as well as behavior of the system following any possible user input. If interactions play an important role and are not obvious from the UI or contextual information, you should include them in the prototype. No specification will ever be complete, but you should try to minimize the amount of potential questions the developers will need to ask or guesses they will need to make during implementation. Your scope should be complete, but do not waste time prototyping screens that are basically copies of others; rather include references to other screens, which will also help the developers discover patterns and make their life easier. Remember, that the prototype will usually be accompanied by a written requirements document as well as a set of visual designs that will complement the specification, but check to make sure what information you need to provide in the prototype. A low-fidelity prototype may be entirely sufficient if visual design assets are delivered separately and referenced correctly in the prototype. Often, it is helpful to annotate the prototype to add information that is not readily visible, especially if you are sharing only screenshots of the prototype instead of the interactive prototype itself.

Prototypes serving as specification

Prototypes used for specification purposes should include additional information for the developer

 

What to watch out for?

Don’t try to put everything into the prototype when you don’t need to. For example, don’t include visual design, if you know that there will be separate design files delivered. Rather, reference the files if you already know their names. All else would be a waste of your time.

Fidelity: Low – medium

Scope: Complete (but avoid redundancies)

Interactivity: Detailed (unless obvious from context)

 

Selling your ideas to decision-makers (presentation)

How can a prototype help?

Designing a great product is a real challenge. Convincing someone to buy a new product or sign off on a new idea can be just as hard. Prototypes can help you impress decision-makers because they basically allow you to travel in time to a point where the final product is already available, giving your audience a much better understanding of the full potential of your idea or product.

What should the prototype look like?

The goal here is to convince people to take an action. Either you need approval to move on to the next step in the design process or you want a client to give you the go on your design idea, or you may want to get a customer to make a purchase decision. Usually, decision-makers are busy and therefore impatient people. They may not have a lot of time to waste on understanding the goals and/or limitations of your prototype or abstract from the visual representation. Therefore your prototypes should be more visually refined (medium to high fidelity) and give a good representation of the final look and feel, i.e. include enough detail in the interactions to make them feel realistic. Since in a presentation setting (unlike in a user test), you tend to be in full control of the situation and therefore can tailor the scope of your prototype to the specific scenarios you want to highlight or show off. Make use of this advantage in order to spend your time most effectively and avoid wasting time on parts that nobody will ever look at.

Navigation flow of a high-fidelity prototype

High-fidelity prototypes are great to sell a future product or just an idea

 

What to watch out for?

Hi-fidelity prototypes may lead inexperienced viewers to assume that the product is almost finished and that it can be delivered soon or without much additional cost. Make sure not to raise unwarranted expectations. Explain that this is still a prototype and which steps are still required to leverage the full potential you have been showing off with the prototype.

Fidelity: Medium – high

Scope: Focused

Interactivity: Detailed

 

Summing it up

In this first of four posts, we took a look at what prototyping is, how it can be useful in various stages of the design process, and how to decide what your prototype should look like during certain project phases and to achieve certain goals.

In our next post we will be looking at how to turn paper prototypes into digital assets and use them for further research. So check back soon.

 

This blog series on prototyping was created in cooperation with Prof. Dr. Birgit Bomsdorf, University of Applied Sciences in Fulda, and is based on experiences gained from various prototyping projects as well as from lecturing and researching in the field of Human-Computer Interaction. It is a work in progress and we will keep updating and adding things. If you are missing something, have questions or want to share a different opinion, feel free to leave a comment.

New Release: Smart Duplicate, Interaction Highlights, Improved Grid

To spice up the summer, we have just released some new features and improvements. Here’s what’s new…

 

#1 Smart Duplicate

Tired of copy/pasting multiple repeating elements to fill your screen? With our brand new “smart duplicate” feature, it is much easier to create a series of tabs, an image grid or a row of buttons. Simply duplicate, and Pidoco will do the positioning for you. Of course, you can adjust where necessary.

Quickly duplicate and align elements

Smart duplicate: Pidoco does the positioning for you

 

#2 Interaction Highlighting

Ever wondered which elements are clickable? Wonder no more. With the new “interaction highlighting” you can simply press the Ctrl key and all elements with interactions attached will light up. Keep the Ctrl key pressed to open multiple target screens in new tabs.

Interaction highlighting: Accentuate the interactive elements in the Simulation View

Interaction highlighting: Easily find links and interactions in the simulation view

 

#3 Improved Grid

We updated and improved the grid feature which we introduced earlier this year. Now, aligning elements feels much smoother and is faster than ever before. Give it a try!

Easy alignment: Smoothly place elements with the improved grid

Grid feature: Smoothly and quickly place elements with the improved grid

 

Let us know in the comments what you think!

 

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

 

Happy Prototyping!

 

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

Coming Soon: More Realistic Prototypes

The next release is just around the corner and we want to give you a sneak preview of some upcoming improvements we’re excited about. So here’s what you are soon going to see when you log into your Pidoco account.

 

Easier page setup

We are introducing an even easier way to create prototypes for a large number of devices, including iPhone, iPad, Android devices and web applications using our new device dialog. Instead of selecting the device or page type with every new page, you will select a default device type for your project when you create it. Of course, you can change the page type at any time and you will still be able to have pages for different devices in one prototype.

Choosing a screen size is becoming even easier

Choosing a screen size is becoming even easier

 

More realistic appearance of prototypes

Along with the new page setup, prototype pages will receive an optional frame in editing and simulation mode that will make your prototypes look more realistic than ever. The frame will match the device type you pick for your pages and can be hidden if you don’t need it.

Device frames make prototypes more realistic

Device frames make prototypes more realistic

Of course, there will also be some additional improvements with the next release. So stay tuned…

Remote Usability Testing using Pidoco and Your Favorite Web Conferencing Tool

Interactive prototypes created in Pidoco are a great resource for running quick and inexpensive user tests directly online. User tests are a very useful way to assess the usability of a proposed software UI, be it a new web shop or an enterprise application. In this post we give you some hands-on advice on how to set up a remote usability test for your Pidoco prototypes using some well-known conferencing solutions.

In short, these are the steps:

  1. Set up your prototype for the usability test
  2. Generate an access token for test participants using a direct link or View invitation
  3. Record the test session using a suitable conferencing tool and a computer or traditional phone. Once the test session is started, hand over moderator rights to the test user so you can see and record his screen and voice.
  4. Analyze the recordings and edit them upon downloading as required using standard video editing tools

There are a large number of web conferencing solutions available. Well-known examples include WebEx, GoToMeeting and join.me. Of course, if your favorite solution has the following features, you can use it instead to run a successful online user test with your prototypes:

  • Screensharing
  • Hand-over of moderator rights
  • Voice connection (e.g. call-in or VoIP connection)
  • Session recording and replay (both audio and screen)
  • Recording download
  • Optional: Annotation option for note-taking during the session
  • Optional: Chat may be useful to send tasks or refer information

And here is how it works:

Step 1: Set up your prototype

Of course you need a suitable prototype to run a user test. When preparing for a usability test session, make sure your prototype contains all the things you want to test, in particular make sure you have properly linked all relevant navigation options in the test scenario. Also ensure that your prototype does not contain unnecessary or even misleading “ballast” like visible comments intended only for developers. If you are testing several scenarios, you may want to use screenflows or folders to structure your scenarios.

Creating a wireframe screenflow in Pidoco

A screenflow created in Pidoco

Hint: If you have invited others to co-edit the prototype with you, it is recommended to make a copy without co-editors of the prototype for testing purposes in order to prevent others from modifying the prototype while you are testing it.

Step 2: Generate an access token

An easy way to grant participants access to your prototype is via a static link to the start page of the test scenario. You can find the link in the sharing dialog. If you are testing multiple task scenarios with different start pages in one test session, you may want to supply several different links to the individual start pages.

Retrieving an access link to a Pidoco prototype

Sharing a Pidoco prototype via a direct link

Hint: Please note that static links cannot be deleted after the test session, so unless you delete the copy of the prototype you made for the test, your test users will have continued access to it via the static link. If you want to avoid this, you can send them a “View” invitation to the start page of your prototype instead.

Step 3: Record the test session

Make sure you are well-prepared for the test session, including a good test scenario, clear instructions for the test participants as well as materials and perhaps even an assistant for note taking. A written test session guide may be useful to remember all instructions you want to give your test users.

Before starting the test session, make sure your voice connection is set up, i.e. your microphone and speakers (or headset) are connected and functional or you have a working telephone line in reach. Start a meeting in your conferencing solution and wait for your test participant to join. At the start of the test session, inform your test user that you would like to record the session and ask for his express permission.

Now start the recording and make sure both the screen as well as the voices are being recorded. Here is an example of join.me.

Recording a Pidoco prototype test session in join.me

Recording a test session in join.me

Instruct the test participant on the test session and his tasks. Then share the link to the prototype with him and hand over moderator rights to him so he can share his screen with you. You will now see the test participants’ screen showing the prototype to which you invited him.

Run the test session as you usually would. Some conferencing solutions have a limit on the maximum duration of a session, so check yours to make sure your test session is not terminated prematurely. With some conferencing solutions like joine.me, you will be able to add notes to the video.

Once the test session is finished, your recording will be available for download or viewing in the web browser.

Downloading recorded test sessions in WebEx

Recorded test session available for download in WebEx

Step 4: Analyze the recordings

You can analyze the session recordings by reviewing them and taking note of interesting observations such as errors made by test participants, questions asked or feedback given. If you would like to edit out the parts that are irrelevant for later use, you can employ video editing tools on the downloaded videos as long as the format is compatible. WebEx allows for conversion of recordings to WMV, MP4, or Flash format, while join.me allows downloads in WEBM format.

An alternative is to use solutions such as http://www.screencast-o-matic.com to record your test sessions instead of the recording feature provided by your web conferencing solution. Such specialized recording solutions offer easy-to-use video editing features that help you trim your session recording to the right length and focus on relevant issues or add annotations and more to them for documentation purposes.

Congratulations To Our Lucky Chromebook Winners

A couple of months ago we announced our Easter Egg Hunt campaign to mark the debut of the Pidoco Web App on the Google Chrome Web Store. To commemorate this occasion we promised to give away nine Google Chromebooks by Samsung as prizes to a few lucky winners among the Pidoco Web App users who managed to find the easter egg hidden in our app. We at Pidoco would like to extend a big thank you to all that participated in the contest and congratulate our lucky winners! A big thank you also goes out to Google Germany for sponsoring the Chromebooks.

For users of Google’s Chrome web browser the Pidoco Web App comes in as a great improvement since it allows users to edit, share, and manage their Pidoco prototypes more quickly and efficiently. Upon installation a large icon is added to the New Tab page that allows you to easily find and open Pidoco with one click! Further more you can set the Pidoco Web App to open in a regular tab, pinned tab, or in full-screen mode. As a web-based wireframing application, the Pidoco Web App offers you the latest in wireframing and prototyping capability and stays up-to-date as we add new releases. Thanks to Chrome’s sync you can access the Pidoco Web App no matter what computer you’re using.

Our lucky winners can now use the Pidoco Web App on their new Chromebooks: It now takes as little as 8 seconds to boot up and start prototyping! The all day battery as well as the built-in WiFi and 3G ensure mobility free from malware and viruses.  The Chromebooks will be going out to winners mainly in Germany, but two will travel as far as the United Kingdom and Sweden.  Some of the happy winners have even managed to come to our office to pick up their Chromebooks in person. Here are some pics!

 

Now Available In The Google Chrome Web Store

Are you using the Google browser “Chrome”? Today Google announced eleven new apps now available in the Google Chrome Web Store. The Pidoco° App is one of the eleven featured apps that users of the Google Chrome web browser can now install.

pidoco-wireframes-tool-in-google-chrome-web-store

With the rise of the smartphone, apps have become a huge hit with private and professional users and are entering the web space quickly. The popularity of the apps has been promoted by the creation of various online and mobile marketplaces where users can easily acquire new apps to enhance their devices. Web industry giant Google launched its Chrome Web Store in July 2010 in the United States. Now eleven German partners have added their apps to the store.

One of the apps featured by Google in their latest press release is the Pidoco° App, which allows users to create, share, comment on and test drive interactive wireframes and GUI prototypes. Users of the Chrome web browser can now install the Pidoco° App with only a few mouse clicks, giving them easier access to Pidoco’s functions. Upon installation, the Pidoco° App can be used as a small tab in the browser’s navigation bar, enabling instant access. In addition, users can now register and sign in to Pidoco via their Google account without having to create an additional password. New users of the Pidoco° App should keep their eyes open when exploring Pidoco: There may be an exciting surprise awaiting you …

Pidoco is used by product managers, business analysts, user experience professionals and creative professionals around the
globe. Check it out at https://chrome.google.com/webstore/detail/bipghjdghdamigamobmcaigdcncbkfof?hl=de (German) or https://chrome.google.com/webstore/detail/bipghjdghdamigamobmcaigdcncbkfof?hl=en-us (English).

Designing Pop-Ups Easily in Pidoco

KISS – “Keep it short and simple.” This is the mantra behind Pidoco, and it is the reason why we have avoided cluttering the tool with complexities like page states, panels and so on for simple things like creating pop-ups. Meanwhile, there is no reason why you should not use pop-ups in your prototypes. In fact, there are strikingly easy ways of creating pop-ups in Pidoco without complex, intransparent functions. And here is how you do it.

The trick is using two pages and two layers. In one of my earlier blog posts I talked about how to work with global layers in Pidoco. This is one situation where they are particularly handy. In order to create a pop-up in your prototype simply follow these steps:

1. Create the page on which you want the pop-up to appear.

Creating a new prototype page in Pidoco to design a wireframe

 

2. Create a layer for the page content and use it to design the page. You will need to put all stencils that will be covered by the pop-up onto this layer.

Placing elements on a layer of a Pidoco prototype.

Place the page content on an extra layer.

 

3. Create a second layer for the pop-up. Design the pop-up on that layer, e.g. using a rectangle in which you place the content of the pop-up. Once you are done with the pop-up, make sure to de-select the layer in My Global Layers.*

Creating a second layer in the UI prototype for the pop-up.

Create a second layer in your prototype to design the pop-up.

 

4. Once you are done with this, go to the Prototype View and duplicate the page.

Duplicating the prototype page in order to create a second prototype page with the pop-up.

Duplicate the page to create a page that will contain the pop-up.

 

5. Now open the copy and activate the pop-up layer. Then link up the “pop-up page” with the original page and vice versa. Voilà, done!

Linking the two wireframes to be able to navigate between the prototype pages and simulate the pop-up.

Link the two prototype pages together to simulate the pop-up.

 

This simple recipe will allow you to create functioning pop-ups without resorting to complexities such as panels, states and the like. Instead of using a panel, you simply will have two pages. Easy, isn’t it?

You can also use the pop-up method to create lightboxes. Simply start the pop-up layer with a rectangle whose fill color you set to semi-transparent. This is easily done through the context menu. Make sure the rectangle covers the entire page. Now you can lock the rectangle in place and continue designing the lightbox content.

So, how about you? Have you tried to figure out how certain things are easily done in Pidoco? Let us know below!

 

* Remember: You can order global layers in the My Global Layers panel by dragging them to the desired spot. The layers are displayed in the order in which you place them, i.e. the top layer will show up on top of all the others. For the pop-up layer to come out on top make sure that the pop-up layer is placed above the layer with the page content in the My Global Layers list.

Feature Snapshot: Working with Layers

Layers in Pidoco are a fantastic way to save time when creating and adapting prototypes. Many already know layers from software programs like PhotoShop. Pidoco features a similar concept that allows users to group and re-use elements, but with one crucial difference: Layers are global in Pidoco.

Image of Global Layers list in the Pidoco Prototyping Software for Interface Design and Usability Engineering

Global Layers are a great way to save time when creating prototypes in Pidoco.

Global Layers are templates that can be reused within a prototype. You can hide and unhide them on any page of a prototype. This means that a layer can be created for the menu bar and website navigation and subsequently be used on all pages with one simple click. This way parts of a website or a web app that appear often do not have to be recreated for every page. In addition, different sections of a page can be compartmentalized into different layers in relation to tasks. An example of this is a webpage with different panes.

Layers in Pidoco are global meaning that any edits made to a layer while on a particular page will affect the layer on all other pages of the prototype where the layer is activated. This is a very handy feature when it comes to adapting a prototype or trying out UI design alternatives: Simply make a copy of the prototype and change the original layer to reflect the new concept. Or create an alternative layer in the same prototype and unhide the original one on those pages where you want the changes to be effective. So here’s how it works.

 

Creating Global Layers in Your Prototype

Layers can be created easily within a prototype when you are in the Page View, i.e. after opening any page of the prototype. To create a new layer in your prototype simply click on the “Create” button in the My Global Layers panel on the right hand side of the screen. Voilà! Doing so will generate a new global layer that will appear as a new entry at the top of the list of layers in My Global Layers. To rename the layer double click on it in My Global Layers and enter the desired name in the text field that appears.

Image of how to create a new layer for a Pidoco prototype to speed up the interface design process.

Creating a new global layer for your prototype takes just one mouse click.

The new layer will automatically be shown on the page you have opened and will be pre-selected so that you can start editing the new layer right away. Layers can be edited in the same way that you would edit the page: Simply drag the UI elements (stencils) from the Stencil Palette on the left hand side onto the layer. You can group them, align them, change attributes, or link them up with other pages. Once you’re done editing the layer, simply switch back to the page by selecting the page above the My Global Layers list.

Image of how to edit a global layer in a Pidoco UI prototype via drag and drop.

With the drag & drop function, editing layers is just as easy as editing pages.

By the way, you can edit any layer that is part of the page you’re on by selecting it under My Global Layers. If you want to edit a layer that is not active on the opened page you have to first display it by selecting the checkbox or switch to a page where it is already in use.  At this point it is good to remind yourself that layers are global and that any change will affect all pages throughout the entire prototype on which the layer is displayed.

 

How to use layers

Let’s say you’ve just created a few new layers, for example for the main navigation of your website or the utilities. You can now use them on any page of your prototype without having to redo the work. To display (or unhide) and use a layer on a page, open that page in the Page View and select (activate) the checkbox of the desired layer. Doing so will make the layer visible on that page.

Image of an active layer in a Pidoco wireframe showing the UI of a travel website.

Layers can be added to prototype pages by simply activating them via the checkbox.

All layers that are visible on the page are marked by a check in the checkbox in the My Global Layers list. Hidden (inactive) layers appear without a check. To hide a layer from a page simply do the reverse: Open that page in the Page View and deselect (deactivate) the checkbox of the desired layer in My Global Layers. Doing so will make the layer invisible on that page. Remember you cannot edit a hidden layer.

Image showing active and hidden layers on a page of a wireframe prototype created in Pidoco's interface design software.

The My Global Layers panel lists all available layers. Simply select the ones you need on any page in your prototype.

This of course also works not only for the navigation of a website, but also for footers, side menus and various other items that you want to re-use. Layers can also be used to model various states of the same page. Say, for example, you wanted to distinguish between the homepage of a web portal before and after the user has logged in. Simply create two layers for the different states of the utilities and/or navigation and duplicate the homepage. Display one layer on each page. Since the links on your layers are also global, you can even include different navigation paths using this method.

 

Managing Layers

All layers available in a prototype are listed in My Global Layers panel on the right-hand side of the prototype while in the Page View. There is no natural hierarchy among layers, but you can order them by dragging them to the desired position in My Global Layers with your mouse.

Image showing how to sort global layers in a Pidoco UI prototype using drag and drop.

Ordering layers is easy and quick in the My Global Layers list via drag and drop.

The top layer in the list will be displayed on top of all others, and so on. Note that the page entry above My Global Layers is not a layer, but represents the page you are on. Elements contained directly on the page will be displayed on top of all layers.

So, this gives you a brief idea of what layers can do for you. Have you tried the layer feature yourself? We’d love to hear about your experience.

About Feature Snapshots: Feature Snapshots address topics that are essential in the daily work of interface designers and all those using wireframes for professional purposes. As such, they are intended to help you learn how to tackle such challenges using Pidoco. One of the key benefits of prototyping is the possibility of working with design alternatives to find out which best suits business and user needs. This particular Feature Snapshot is about working with layers in Pidoco and how it can support the iterative design process.

A New Year’s Compilation Of Usability & Wireframing Poetry

We have moved well into the new year, and this is a great time to briefly pause and look back at the year 2010, which has been a remarkable year in many ways. It’s been exciting, to say the least, with Facebook becoming the most frequented website on the world wide web, Google Android mixing up the mobile market, the number of mobile internet users growing massively, Twitter becoming a viable communication channel for established businesses, and cloud services really starting to take off as companies like Microsoft, IBM, or SAP have followed Amazon into the virtual world.

What role do topics like user interface design or usability play in this setting? Well, with more and more services going “cloud” or mobile, most companies have noticed that traditional interface design concepts need to be reconsidered, not only because navigation patterns differ when you are using software in a web browser or on the small screen of a mobile touch device, but also because the competition is becoming ever more intense online and in the mobile market.

To pay tribute to the rising significance of great user interface design, we have started creating poetry that plays on the variations of UI design topics. Here are a few of the diamonds in this modern category of usability and wireframing poetry. Enjoy!

 

Ode to the Usability of Interface Designs

Though still unfinished pride of expertness

Thou wireframe of an interface design

A rapid paper prototype used to express

Ideas of layouts and navigation that lurk in the mind

What icons and buttons envelope thy shape

Of links and portals that strive with growth

through the fiber optic cables of an ISP

Streaming gigabytes of info with ease for you and me both

What mad pursuit ever since the struggles of Netscape

When the ripe World Wide Web became destiny

 

Interfaces designs are sweet, but those uncluttered

Are sweeter:  which is a reason why users stay on

When a website is clear it becomes more endear’d

Leading to increased visits and subjective satisfaction

Being used with great ease and not wanting to leave

Accomplishing tasks with minimum error scares

Knowing I can recover if something goes amiss

Though winning near the goal – yet, I do not grieve

For using this graphical user interface design is bliss

With a high level of memorability, this interface design is a breath of fresh air!

 

Based on “Ode to a Grecian Urn” by John Keats

 

 

Ode to a Skinned Interface Design

I went to the link my friend sent me,

And I saw what I never had seen;

An ad banner was built in the midst,

Where I used to click on the screen.

 

With no choice but to scroll down I did frown,

My friend’s interface design was upside down,

Like a tourist with no clue I looked around lost in town,

‘Cause there were no breadcrumbs to be found.

 

A millisecond too long I located local navigation,

Thinking ‘they sure could use a wireframe tool for their creations’.

With findability resolved these usability problems would dissolve

And, in tow, his search engine ranking would evolve.

 

Based on “The Garden of Love” by William Blake

 

 

Instant Interface Design Sorrow

My mother groaned, my father wept:

Into their shopping cart unwanted things leapt,

Helpless, overcharged but arrestingly proud,

Feeling like a fiend was hid in ‘the cloud’.

 

Who to blame when the mouse was in my father’s hands,

Well poor usability & interface design will hurt a brand,

Placing the ‘Cancel’ button a nanometer from ‘Buy’ is not best,

Especially with a return policy worse than the rest.

 

Based on “Infant Sorrow” by William Blake

 

The original idea behind these poems was to adapt famous poems and use them to shed light on issues that affect usability, wireframes, wireframing tools and user interface design. If you have some suggestions of poems that you would like for us to interpolate during the coming year, please feel free to leave a comment with your request in it.