wireframes & usability

Pitching an idea or concept for a new website or application to your client is not only about understanding what your client wants, but also about developing a presentation that allows you to demonstrate that your product will satisfy your client’s requirements.  Delivering a good product presentation is the art of convincing clients that your work is worth their time and money. Unfortunately, it can be a real hassle to update a presentation if you change your mind about a key aspect of the concept, especially when you are using images of the user interface to visualize key ideas or scenarios of use in your presentation. And the same problem often arises again when you have to update a presentation or specification document after receiving feedback from a client.

Pidoco offers an easy solution to this problem! The Direct Link feature allows you to continually update images of your prototype within various office documents, for example a PowerPoint presentation.  This gives users the ability to update office documents to the most recent version of a prototype without the hassle of using copy and paste on each individual image.  Using the direct link feature users can embed links to various prototypes within a presentation and then send the file to clients or colleagues for documentation or reviewing.  The embedded links will appear as graphics of the related prototype in the document.  Unlike static images, however, the embedded images can be updated with just one mouse click, sparing users from the unfortunate job of having to manually exchange old images versus newer ones, one by one.  Updating the embedded links synchronizes the images in the document with the current version of the Pidoco prototype found online thereby ensuring that the latest changes are automatically incorporated into the presentation.

Step 1: Extracting a link from Pidoco

Image 1: The direct linking dialogue window.

Using embedded images with Pidoco prototypes is easy. Here’s an example of how to use the direct link feature with Microsoft’s PowerPoint software. In order to embed a direct link into your PowerPoint presentation you must first extract a link from Pidoco. To do this, open your Pidoco prototype.  Go to the Screenflow View of your open prototype and open the page that you want to embed into PowerPoint.  Then point at the “Share” button in the Toolbar and click on the “Get a link to this Prototype” option. You will see the dialogue window shown in image 1.

Copy the link located in the text field marked “PNG”.  This is the link you will embed into PowerPoint.

Step 2: Embedding the link into PowerPoint

Image 2: Inserting a direct link into a PowerPoint presentation

After you have copied the link to your prototype from Pidoco’s website, you can embed it into an opened presentation. Go to your PowerPoint presentation to complete the embedding process. Open the “Insert” option located on the Office Toolbar and click on the “Picture” option as shown in image 2:

Image 3: Using the dropdown menu options to embed a direct link

Once you have clicked on the picture option, the following “Insert Pictures” options will appear (image 3):

Image 4: The result: A neatly inserted image of the prototype that can be easily synchronized with the original prototype

Paste the link into the text field labeled “File Name”.  Then open the dropdown menu of the “Insert” button, and select the “Insert and Link” command.  The image of your prototype will appear in the selected slide of your PowerPoint presentation, as can be seen in image 4:

Step 3: Synchronizing Prototype and PowerPoint Presentation

Now that you have embedded the image it is easy to synchronize the presentation with the most current version of your prototype. To do so, click on the Office Button and point to the “Prepare” option.  Click on “Edit Links to Files” (image 5):

Image 5: Easy synchronizing of presentation and prototype with one mouse click

Clicking on this option will automatically update your presentation to include the most recent state of the prototype created in Pidoco.

Benefits of the Direct Link Feature

Summing things up, Pidoco’s Direct Link feature is a fast and easy way to keep your files up-to-date even when your prototypes change frequently, which often happens in early design phases.  This will help you communicate and share information better with your clients or colleagues and will minimize the time you spend on updating presentation and specs.

When working with people you collect a lot of stories about and around your profession. Jan Jursa, a good friend of us, has collected 42 such stories in a free eBook UX Storytellers. People he met at different UX conferences and events have contributed to this project, among whom are names that you may already know (Dave Malouf, Mark Hurst, Henning Brau, to name a few) and a lot that at least I have not yet heard of. Nevertheless, you will find stories about all kinds of topics: accepting Star Wars at work, how a UX pro goes car shopping, how driving a cab or sex and drugs lead to being a UX pro, and the famous Acme Corp appears as well. Thanks to a sneak preview I was able to read a few stories, so I can tell you that it is worth having a look at this collection. Happy reading!

Our friends of Newsletter2Go (a Berlin based Startup) has created a very interesting tool:

Unser befreundetes Start Up Newsletter2Go bietet eine onlinebasierte, leicht zu bedienende und für jede Unternehmensgröße geeignete Plattform für E-Mail-Marketing und SMS-Marketing.

Über eine Importfunktion können Empfängerdaten blitzschnell übernommen oder aktualisiert werden und komplette Kampagnen in wenigen Minuten mit Hilfe eines WYSIWYG-Editors erstellt werden. Das Besondere neben der Kombinationsmöglichkeit aus Online- und Mobile-Marketing ist die starke Personalisierungsmöglichkeit in Mailings.

Newsletter2Go ermöglicht es hier, beliebig viele verschiedene Attribute für jeden Emfänger zu verwalten. So können bspw. Geschlecht, Alter, Postleitzahl oder Körpergröße von jedem Empfänger importiert werden und auf das Mailing abgestimmte Gruppen angelegt werden. Dies erhöht die Relevanz und den Erfolg von Newsletter-Kampagnen. Zudem können alle Attribute auch als Platzhalter in Mailings eingebaut werden, die beim Versand durch die individuellen Ausprägungen der Empfänger ersetzt werden. Sogar Bedingungen wie “wenn weiblich, dann Liebe Frau” sind möglich, so dass Empfänger im gleichen Mailing bspw. persönlich mit “Lieber Herr Schubert” oder “Liebe Frau Schneider” angesprochen werden können.

Die statistischen Auswertungen ermöglichen Nutzern die ausführliche Analyse ihrer Newsletter-Kampagnen. Neben der Öffnungsrate, der Klickrate, uvm. ist hier das Geolocating-Feature hervorzuheben, das dem Nutzer Location Based Marketing erlaubt.

Die Dienstleistung ist durch nach Größe gestaffelte Pakete für jedes Marketingbudget geeignet. Am besten einfach einmal ausprobieren!

After our release back in August where we improved the usability of our layer system, it’s time for another major feature on our road to redesign pidoco: groups. With the current release you can group several elements together such that they behave as one single element. You can move them, clone them, copy them to a different page, do whatever you like, without the need to first select all single items. It is also possible to add groups to another group.

Why is this a major feature? Because groups will become custom stencils in the future. To be more precise: you will be able to convert a group into a custom stencil that is available in your palette. This way, you will be able to change several occurrences of such a stencil at once by modifying the custom stencil. But this is future talk, for now there are just simple groups.

This not being enough, we also added two new stencils: unordered and ordered lists. They can be edited similar to the way you define the hierarchy of a menu but are converted to the HTML ul and ol elements. All entries that begin with stars (*) are unordered items and all entries with the hash (#) are ordered items. This way, you can also mix both types in one list.

Do you have ideas for further stencils? Are you missing a feature very bad? Have a look at our feedback forum and add your thoughts or vote for existing suggestions.

Our friends of OMQ (a Berlin based Startup) has created a very interesting help-desk tool:

Unsere Freunde von OMQ haben ein interessantes Help Desk Tool entwickelt, mit dem man Software Support automatisieren kann:

Damit Softwareprobleme nicht mehr den Alltag am Computer bestimmen, wurde OMQ gegründet. Mit dem neuartigen Help Desk System werden Supportabteilungen von Softwareherstellern entlastet, und Kunden erhalten schnell eine Lösung für ihre Probleme.

OMQ entwickelt Produkte, die den Support von Softwareherstellern automatisieren und effizienter gestalten. Die Idee dabei ist einfach: Softwareprobleme, die schon einmal durch einen Supportmitarbeiter gelöst wurden, werden zentral gespeichert und stehen später anderen Kunden mit den gleichen Problemen zur Verfügung. Basis für das Produkt ist eine intelligente Sensorik, die Support-relevante Daten bewertet und automatisch zuvor gespeicherte Lösungen vorschlägt. Die zentrale Wissendatenbank von OMQ diagnostic stellt somit das Kernstück aller Supportprozesse dar. Wenn eine Kundenanfrage nicht direkt beantwortet werden kann, wird ein Ticket in dem Ticketsystem erzeugt. Dieses kann dann von den Supportmitarbeitern abgearbeitet werden. Die Lösung zum Ticket wird in der Wissensdatenbank gespeichert.

OMQ diagnostic versteht sich als Brücke zwischen dem Endanwender und dem Softwareunternehmen und unterstützt direkt die Supportabteilung. Die Supportanfragen können über synchrone Verfahren, wie den Live Support oder das Telefon gestellt werden. Ebenso stehen aber mit OMQ diagnostic auch asynchrone Verfahren wie der E-Mailsupport zur Verfügung. Somit kann eine direktere Kommunikation zum Kunden aufgebaut werden, die Vertrauen schafft und die Kundenbindung verstärkt. Die Einbindung der OMQ diagnostic Lösung in das jeweilige System des Kunden geschieht über eine einfache Integration von zwei Zeilen Quellcode in das Flex oder Java Script. OMQ diagnostic stellt somit eine innovative und einfache Möglichkeit dar, Softwaresupport zu optimieren und effizienter zu gestalten.

Some weeks ago I blogged about how we are redesigning pidoco. Yesterday, we finished the second iteration of Usability Tests. Although we did not yet analyze the test results in detail, our impression is that we did the right steps with this iteration and we may now continue with designing some details.

In the meantime, we started with improving the layer system of pidoco. We know of many people who struggled with the layers and needed some time to understand how pages and layers are related to each other. Another issue was the way too long list of layers that you got when prototyping for a while.

The new implementation solves these issues with just a small change: every page may contain elements itself. You can think of a special layer for each page, that is not shown in the Global Layer Repository. All elements of a page are on top of any layer that is visible on the page, but you still may rearrange the global layers among themselves. To represent this special layer (or better to say, the page) we added a new item on top of the global layer repository, which you can choose to edit the elements just as you would choose a layer:

The big advantage of this system is that if you want to you may ignore the layers completely and just work with pages. And once you are at the point that things get too complex on a page you can add layers to structure things. Without all the layers that just appear on one page the global layer list is a lot less cluttered now. An improvement we only realized while implementing this feature is that our word export now makes a lot more sense having a chapter for pages and one for global layers.

We’d be happy to know what you think about this improvement. Please feel free to chat with us and tell us whether this helps you or is just confusing you.

This blog is intended to cover many different things around Usability and Wireframing and some related stuff we do at pidoco. In some situations we were hesitating with publishing things of our daily work at pidoco that are rather technical and might be a little misplaced in here. Therefore, we started the blog funky code a while ago with some of our fellow students from Hasso Plattner Institute where we can publish all our ideas about web development, working at a startup, project management, or what just comes to our mind.

Today I published the second part of a double blog post on JavaScript testing (first part) and how automated tests can be integrated into a continuous integration server (second part). If you think that such topics could be of interest to you, please feel free to bookmark http://fun.kyco.de or add it to your favorite feed reader. If that is not the case, you won’t be bothered with these things in here anymore.

We have been using pidoco ourselves for years. But right now it is getting more interesting since we are working on the next version of pidoco.

In our usual development cycle of three weeks we concentrated on many smaller improvements and little features that help you prototype faster. With the next version we want to implement bigger improvements like adding more structure to the repository and editor, allowing for easier reusing of smaller components within your prototypes, or increasing the flexibility regarding the interactions that you can model with pidoco. This will include the suggestions that we received through our uservoice forum or that were mentioned in our support chat.

Making such big steps will be a nice challenge that we are facing. Currently, we are developing a prototype of the final version that is supposed to include all changes we would like to do. After some initial brainstorming a while ago, Tino started to create the prototype. And he surprised me with some very creative elements, like the little boxes with a ‘V’ inside, which are menus with just one top level entry. They act as simple hover menus, very similar to our current context menu.

Having this initial prototype, we invited some few people to remote usability tests. They were asked by Tino to do some simple tasks, mainly navigating through the given dummy prototype. (Now it’s getting recursive…) Since we used our own tool, we did not have to travel to Frankfurt am Main or Hamburg to meet the people for one hour of test. The complete session was recorded, including all mouse and keyboard interaction and the voice of both Tino and the test participant. That enabled me to review the test sessions, making notes, and collecting all the ideas that arose throughout the tests.

With the notes I spent most of this week in modifying the prototype, applying some simple ideas from the tests, and thinking of solutions for issues we realized during the tests. Following will be an internal review with our team and, possibly in the course of the next two weeks, a further round of remote tests. Until now I’m quite happy how everything worked together. Conducting a test with no setup time, handing over the prototype to different people to work on without any hassle, being able to describe many ideas in the prototype without too much work.

Once we think the concept is kind of finished, the real challenge will start. We do not want to lock our doors for two years and implement the next version in one step. We’d rather like to cut the concept down into manageable pieces that we can implement in a short period of time. Usually, we tried to deploy a new version every third week. This time we might have to break with this rule, but my hope is that we can do most things within 6 weeks (two sprints) or at most 9 weeks, which makes a new version at least every second month. That said, let’s see how it will be in reality. I’ll write some updates every now and then…

Now back to my prototype.

Wow!

That is all I can say about the awesome feedback we got after the UXcamp Europe taking place a week ago.

To give you an idea:

• @elreiss: “UXcamp Europe in Berlin was a SMASH success. Thanks to the fab organizers for making this happen. And keep it open and dynamic!”
• http://twitpic.com/1sh7mw: “Ranjeet Kumar came from India to #uxce10 and says it was a best conference he ever attended (other were paid).”
• Hilko Holweg (maczarr.de) “Das Camp zählt zu den besten, die ich bisher besucht habe.” [The Camp is among the best I ever attended.]

During the closing session on Sunday some were suggesting to have the UXcamp take place either twice a year or make it 4 days long. Well, this might be a little too much for us to organize, but maybe there are others out there who want to do a camp themselves. We’d love to support you in that, so please speak up!

One thing we should not forget is that we only set the infrastructure for the weekend, but the participants filled it with live. Therefore, we have to thank for 57 great sessions (Saturday and Sunday). You can find many of the presentations on slideshare, where we even were a featured event! Many people helped us at either serving coffee all the time or taking care of the cloakroom, which we couldn’t have done ourselves. So, a big THANK YOU to all the 400 people who came to Adlershof to share this weekend with us.

About a third, maybe even more people were traveling a long way since they are not living in Germany. Some were even coming from different continents! We are really happy that we were able to welcome you in Berlin. In my opinion it is quite exceptional that so many people traveled that far just for a BarCamp.

When meeting people after the camp a lot are asking me: “You are doing it next year as well, don’t you?” Well, we have not yet talked about that. It is quite time consuming to organize a BarCamp for 400 people. On the other hand, I have the impression that if we won’t do it again, people might get angry with us and stop talking to us. We’ll let you know…

In this blog post I will show you a cool application that I have worked on outside Pidoco. Some of you might be familiar with using modeling tools. For example if you are a software developer, chances are you have to design architecture diagrams from time to time. Or if you are at a big company, you might have seen one of these complicated process models that explain how your business works. If that’s the case and you use this kind of software, the processWave.org Editor might make your work a lot faster and more convenient.

The processWave.org Editor is a fully collaborative modeling application that lets you create technical diagrams with several people at the same time. All changes that you or others make to the diagram are automatically synced between all participants in real-time – just as you know it from the Pidoco Prototype Creator. It is written as an extension to Google Wave, a powerful new collaboration platform from Google, that helps you create all sorts of documents and artifacts with multiple people very quickly. If you did not have the chance to give Wave a try yet, let me explain how it works: You start a new Wave, an artifact which is often described as “equal parts conversation and document”. You then invite the other people to that Wave to let them participate. And with a click on a toolbar button you add our editor to the document, and start modeling. A typical use case is shown in this video. The cool thing is that you can use Wave’s powerful conversation capabilities to discuss the model while you create it.

To try out the editor yourself, visit http://www.processwave.org – it is free and open source. We currently support modeling in different languages from the areas of software and process modeling, such as the Unified Modeling Language, Petri nets, Business Process Modeling Notation or Event-driven process chains. The work was done by my bachelor’s project team at Hasso Plattner Institute, the place where I study when I am not developing server components of pidoco’s Prototype Creator. Google actually liked our work so much that they invited us to demo it in a talk at Google’s biggest developer conference, Google I/O in San Francisco.