Posts from "February, 2015"

How To … Work With Screenflows

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

 

Step 1: Create a screenflow

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

Create a screenflow within the Prototype View

Creating a new screenflow from the Prototype View

 

Step 2: Edit the screenflow

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

Add all previously not used paged to your screenflow

Add all previously not used paged to your screenflow

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

 

Step 3: Link pages and create maps

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

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

Show linked pages within the Screenflow View

Screenflow showing a map of linked pages

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

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

 

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

Happy Prototyping!

Top 5 Things Prototypers Can Learn From Football!

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

 

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

Create you creative tactic

Develop a creative tactic

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

 

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

Collaborate with your team members

Collaborate with your team members

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

 

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

Set the reaction to a action

Bet on interactivity

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

 

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

Entertaining interactions

Entertaining interactions

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

 

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

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

Discuss the results

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

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

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

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

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

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

 

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