wireframes & usability

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.

UPDATE: Today, December 23rd, we deployed this new version with a short delay. Thanks for your patience.

A while ago I posted about the redesign of pidoco and how we implemented the first step of it. Now the second step is approaching.

In about a week we will deploy a new release of pidoco including a major change in the UI. Since we change the ‘home screen’ of the prototype, we felt the need to announce this modification ahead of time. The screenshot shows a preview of this new home screen, that we call the ‘prototype view’.

This view contains all the pages and screenflows of your prototype represented as icons in a grid. The upper part shows the pages and the lower part the screenflows. Both lists are ordered by name, giving you the possibility to adjust the ordering by changing the names. In order to add a page you can either click the ‘+’ button next to the ‘Pages’ title or use the new ‘add’ icon in our toolbar. To open an item, just double click on it as everywhere in pidoco.

In contrast to the screenflows we do not use thumbnails in the prototype view for one reason: performance. Although browsers have become a lot faster than two years ago, they still have trouble rendering complex vector graphics. Therefore, we use simple icons for each item. Our goal is to accelerate opening different pages, which you had to do via a screenflow before.

Another improvement that comes with this new view is that we can hide the panel on the right hand side for both the prototype view and the screenflow view. This provides you with some more screen space when working with screenflows, especially if you are using a rather small screen.

We expect this release to arrive the next weekend, so be prepared to a different look of pidoco when you open your prototypes the next week.

The German UPA hosted the World Usability Day in Berlin this year on November 11 as part of a larger World Usability Day 2010 that took place across Germany, Austria, and Switzerland.  The theme was communication, specifically how our communication methods impact technological developments and information services now as well as into the future.  Said Elizabeth Rosenzweig, a founding member of the event, “World Usability Day 2010 will serve as an impetus to creating greater awareness for designs, products and services that improve and facilitate communication around the world.”

World Usability Day 2010 in Berlin. Image Source: www.wud-berlin.de

Berlin’s World Usability Day focused on mobile communication, specifically how Smartphones, iPads, laptops, etc. affect communication in our daily lives and the resulting implications, risks and benefits, for UX design and usability. If you are a part of the creative industry or are simply interested in usability, the World Usability Day is a must. So, as a worthwhile investment put it on your agenda for next year. Pidoco was proud to support World Usability Day 2010 as a sponsor and we will be on the scene again next year. We hope to see you there!

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!

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.

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…