Posts in "Prototyping"

Bringing Great Mobile Apps To Market (Faster) Using Rapid Application Prototyping

For those of you who did not make it to CeBIT this year, we thought we would share our presentation with you. Our CEO, Philipp Huy discussed the advantages of prototyping in an increasingly mobile market. Why is mobile app prototyping an important topic? Mobile internet use has increased rapidly over the past years and has taken over desktop-based access in countries like India already. With more of us surfing the web on smartphone and tablet devices, it pays for companies to develop mobile-compatible websites and mobile apps. For those that already have a mobile product, chances are this needs improvement.

While we may be inclined to focus on content and the commercial goals of a project, the user experience of a mobile app is often the decisive factor in ensuring market success. Prototyping is a great way to tackle the UX challenges that mobile interactions set for designers and developers as it allows them to involve end users and decision makers early on. At Pidoco we value communication, collaboration and user-testing and therefore offer our customers a special Mobile Edition for simulating mobile app prototypes directly on tablets and smartphones with our Pidoco App. With an iterative approach to mobile app design and development as enabled by rapid application prototyping, developers can significantly reduce risk and bring higher-quality products to market faster. We believe prototyping is one of the quickest and most effective ways to ensure market success for your mobile projects and you can see some of our use-cases in the presentation.

You can access the full presentation at Slideshare – don’t forget to follow us on there, as well as on our other social media channels including LinkedIn, Facebook and Twitter.

 

 

10 Great Prototyping Tips

Too many people think that creating prototypes is a quick fix to ensuring that a final application will be user-friendly, but the truth is that prototyping tools can only take your project so far. To create successful functioning applications, you must first take some basic steps to get the most out of this valuable design process.

1. Know your purpose
Whether you are sketching out paper wireframes or want to create a higher fidelity interactive mockup, you should have a clear mindset of what you want to achieve from prototyping and what the requirements of the application are that you are prototyping.

2. Get your team involved
Prototyping is a process that does not require programming. This means that anyone you think can bring value to your concept should be involved in the creation process. With collaboration, you can get the perspective from different teams, which will help you look at your concept objectively.

3. Communicate
There are so many possibilities nowadays for communicating, wherever your stakeholders are. Make sure that you take advantage of this. With prototyping software, you can comment in the prototypes to show where you want to make changes, or to make things clearer for others.

4. Be critical
It might be that your design doesn’t make the cut. Often you have to balance the needs of the client with those of the user. This can make design a difficult task. Try to be objective when you look at your prototypes. Remember honesty early on in the development process pays off.

5. Experiment
Prototyping is the most cost-effective part of your design process, so take advantage of this. Create multiple wireframes to show your stakeholders. Remember these can be used in A/B testing later. Another advantage is that it can be easier for your stakeholders to articulate what they want when they are given options.

6. Consider your use cases
Too many times people create prototypes without considering the actions and processes of the user. Use cases can be drawn up quickly and often put in a diagram, so you can think about the different functions your users will want to carry out. For more information on use cases, click here.

7. Carry out user testing
Even with use cases, you will often be surprised by how your user responds to your UI. Whether you choose to carry out remote user testing, or watch your user click through the prototype in front of you, it’s invaluable to see how your user interacts with your design.

8. Think of the next step
Remember that your prototype will be used as a blueprint for other designers and programmers. Make sure this is a useful guide for them and be aware of their requirements for the prototype.

9. Document your processes
This is especially important if you are working for a client. A specification document of a prototype is a record that both parties can refer to. This means that if your client demands more features, you can make it clear that this is outside the initial agreement.

10. Don’t throw your wireframes away
Not all wireframes and prototypes should be discarded after a project. You may end up working for the same client again, or want to take ideas from your existing prototypes. Remember, it can be nice to take a basic existing prototype so you don’t have to start with a blank page in your next project.

Do you have any great prototyping tips I have missed? Feel free to comment below.
 

Bridging The Gap: From Paper Scribbles To Interactive Prototypes

Pidoco and ScatchApp are joining forces to help our users make the most of paper prototyping. While Pidoco is a great tool for creating UI prototypes of websites and software applications really easily, we still find that some of our users prefer to create their initial designs on paper. To help our users save time and money, we are working with ScatchApp to see if we can make it easier for our users to transform their paper wireframes into interactive software prototypes. We believe ScatchApp is a great tool that will help our users create prototypes even faster than before and take advantage of the great collaboration and testing features Pidoco has to offer. ScatchApp has won several awards and is a triple Startup Weekend winner of Szczecin 2011 due to its innovation merging the boundaries between paper and computer.

How does ScatchApp work?

ScatchApp works by using unique technology that can recognize the layout and features of paper wireframes. ScatchApp can recognize components such as text boxes, headlines, buttons and image place-holders, which is great, whether you are creating flowcharts or wireframes. Uploading your designs with ScatchApp is easy. Simply draw your sketch on a piece of paper using the relevant symbols, take a photo with your mobile phone and upload the image to ScatchApp. Within seconds, your design will be transformed into a digital wireframe that you can edit online in Pidoco. ScatchApp even aligns the individual elements in your design, giving you a clean, professional-looking layout.

Paper Wireframe of Pidoco Home page

We've sketched out a paper wireframe of the Pidoco home page
that we will upload with ScatchApp.

How will you be able to use ScatchApp with Pidoco?

Here’s an example of how to use Pidoco in connection with ScatchApp. We understand that some people like to sketch out their ideas on paper first. Some even find this helps them be more creative. Naturally, paper has its limitations and even the best paper wireframes cannot produce the same results as prototyping with Pidoco. In addition, paper prototypes cannot be adapted or shared easily. In the example above, you can see that we’ve sketched out the layout of the Pidoco home page. In the picture below, you can see what the finished product will look like in Pidoco once this has been uploaded into ScatchApp. The buttons, text boxes and image placeholders appear in the same visual layout as in the sketch.

Prototype of the Pidoco Home Page

Now we've uploaded our sketched wireframe to Pidoco,
we can edit our prototype and add interactive elements.

In Pidoco we can now link and edit these pages. With Pidoco you can also collaborate on prototypes online in real-time and even use your prototypes in usability testing. What’s more you can discuss your prototypes with colleagues online. Using ScatchApp with Pidoco therefore enables you to model your UI designs with paper and pen, while making the most of all the great features of digital prototyping that Pidoco has to offer. If you would like to learn more about Pidoco have a look at our website, or if you would like to learn how to program your own application against the Pidoco API, take a look at our documentation here.

Developing a collaborative modeling application

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.

The Beauty of Web-Based Paper Prototyping -Part 3-

The previous week, part TWO of this post was on the benefits which digital, web-based prototyping will make exportation and presentation easier. This FINAL part will show you how iterations can be made easy and that using digital solutions will in fact help against the fight of global warming.

Quick Iteration: share

One of the main benefits of using the digital solution is the possibility to make us of quicker, easier and cost-effective iterations. But this will only happen if the prototype can be adjusted to new requirements in an instant. Digital paper prototypes can be re-used and won’t have to be created all over again once a new iteration starts. You simply have to adjust specific elements once and then apply those changes to the rest of the prototype, that’s it.


Sustainability: green

The average usability testing project leaves a footprint of approximately 250 kilograms, or 0.25 a tonne of CO2. That may not seem much but that is close to amount of CO2 emission as a 3 hour flight. Usability testing is universally seen as the best way to improve a system’s ease and satisfaction of use. If one usability test itself emits the equivalent of a 3 hour flight, there clearly are considerable gains to be made! In an ordinary usability test, someone travels from his/her location to a laboratory or office where they interact with a test facilitator. Normally this takes about an hour and the process is repeated with 7 to 10 people.

The carbon emission for a usability testing project is based on an average of 10 participants, with each participant traveling 20 kilometers return to get to the test and spending 1 hour with the test facilitator.
More on: http://www.prnewswire.com


Conclusion:

By making use of the newest technologies it is now possible to make the shift from paper-based prototyping to digital or web-based prototyping. User-centered design, sharing of ideas, iterative work-flow, collection of feedback and collaborative work are all aspects which speak in favor of implementing such process. Developers, designers, clients and test-users alike can benefit from working on digital prototypes which engage them from the very first idea. Unnecessary iterations which often confuse and hinder continuous work-flow can be a thing of the past since everyone will be up-to-date. Test-users can work in their natural surrounding whilst the design team can make changes on-the-fly.

Overall, web-based prototyping can only be beneficial for all parties involved. Also, since using excessive sheets of paper can be a thing of the past, it will be a make our planet a little greener.

The Beauty of Web-Based Paper Prototyping -Part 2-

The previous week, part One of this post was dealing with some of the core ideas of why classic paper prototyping is no longer sufficient. This week, I will talk about why versioning of prototypes and the ability to acces, export and present the results are a necessity.


The Need for Digital Prototyping:

Conference TableThat big round table to which everyone gathers around can never be big enough! The bigger the table becomes, the more sketches and papers are on the whiteboard, the bigger the chance of losing out on some detail. A reasonable alternative would be making use of digital prototyping and to have that table digitized (including the papers, sketches and the words being said). Why keep working with the whiteboard, stacks of paper which have to be carried around the office? Digitizing the work and all what comes with it would make the chaotic meetings a thing of the past. Using a digital solution is a  way which allows collaborative work-flow to be fully recorded, ammended, shared and viewed at at given time.


Team Work Challenge:

collaborate

One of the requirements for successful team work is to administrate various versions of the same prototype. Versioning of prototypes has two meanings within this context:


(1) the different stages in development process which can be accessed at any time
(2) different versions of the same prototype

Once several people work on the same prototype the need for digital versioning quickly becomes apparent. While one is already working on the CSS, the other is still in the process of developing the menu bar; now can you see what may go wrong? Using a tool which gathers all the different process and work-flows of the various co-designers will help to unite the project into one single application and help the collaborative flow. Real-time collaboration will ensure that misunderstandings and miss-communication are reduced to a minimum. A team which works from different locations and on different elements within the same project are in dear need of such a tool!


Presenting the Results:

Once a prototype is finished, the real work starts. The prototype will be used for extensive usability tests, will be used for presentations and is part of the developers specification. All the various players need access to the prototype which again needs to be in various formats. Since it is pivotal to have a prototype ready for presentation, viewing and export, it should be digitized and ready-accessible on the Web. Well, not accessible to all, just to the one’s involved in the process of course!

Usability tests need to be run and an interactive and/or clickable prototype must be easily accessible to the test users. Furthermore, if qualitative feedback is what is needed, a moderator also would need to access the prototype without a problem. In addition, the developers and the rest of the design team must be able to quickly ‘click through’ and be able to make some minor changes if needed. This is why a prototype needs to be open to all the people involved, needs to be updated in real-time and be exportable to any format and at any time!


Part THREE will talk about the benefits of digital iteration cycles and talk about the positive impact digital prototyping can have on our environment. Hope to see you there!

The Beauty of Web-Based Paper Prototyping -Part 1-

This article which will deal with the various benefits which digital web-based prototyping can bring to your production cycle. The main idea of this article is to promote the digital implementation from the very start of the production work. Many  design agencies still work with pen and paper, a method which has been used for a long time but which in today’s world should be seen a thing from the past. It is time to explore the possibilities which technology can offer us!

The article will be posted in 3 parts -which should be released a week after another. Part ONE will offer a little review on classic prototyping and talk a little about the general structures within the team. The following articles will go more in-depth and talk a little about the ambitions, requirements and solutions for making the product development a little easier and more fun. I hope that you will enjoy this article and hopefully be able to take something useful out of it. Thanks!


Introduction:

User-centered software development is a dynamic and creative process. In the prototyping phase and in the evaluation, one can see it’s benefits and new challenges arise for the production team. The conceivability of the clients must be fully understood, ideas of the heterogeneous design team as well as the gathered feedback of the target audience must be included into the design. A challenging task indeed!

Due to global requirements of today’s digitally connected world, ‘classic paper prototyping‘ often is no longer sufficient. A bunch of draft papers are easily misunderstood, mixed up or lost in the super information highway and the need for an all-encompassing, digital and rapid solution is becoming more of a demand.

Therefore, web-based rapid paper prototyping has been growing into a well known topic for designers, developers and clients. But what is it what makes digital sketching so appealing to the usability community? Are design agencies simply too lazy to do the manual work with pen and paper or do they simply want to be more Eco-friendly and want to stop the deforestation of the amazon by refusing to use paper-based prototypes? This article will touch some of the core points and issues within the field and will list the justifications of this development.


Paper Prototyping:scribble

The easy way to create low-fi prototypes, to gather the design team around the big table or the whiteboard and a chance for everyone to jot down their ideas on the project. This technique supports the main ideas of rapid paper prototyping. Everyone can make changes and also view the changes already made by others. Everyone knows what is going on.

However, there are a few problems with this method. Increasing the complexity of a prototype whilst keeping a full overview on the project as a whole can become a bit of a challenge. Once a change has been made, it it difficult to be undone. Of course you can simply delete or throw away an error prone design but it is not as easy as a simple ‘CTRL+Z’.
To add to this, imagine that the team works from different locations and with different tasks to manage … it can become a mess in no time! Therefore, paper prototyping is no longer sufficient for the demands of the modern design agency.


Prototyping Roles:

The main roles in the prototyping stage are of course the users, the design team, the developers and the client. In order to finish up with a satisfying product, the different needs of those interest groups must be met and considered. Gathering those people around the same table, meeting their requirements, dealing with time pressure, budget limitations and the different locations of the various key players are a tough one to call.


The Design Team:

The design team is a collective of some very smart and able professionals. The interaction designer, visual designer, information architect, human researcher, usability experts and prototype developers are just some of the many roles one can find in a team. In order to express their varied ideas on how the end product should be like, collaborative prototyping is the way to meet this ambition. This method will enable them to discuss and clarify the multitude of requirements.



Next week, part TWO of this article will follow. Subjects are the challenges of a team, collaborative working and requirements for digital prototyping.

Evolution of Prototyping

These days we celebrated the third birthday of the pidoco project. For a short presentation, I searched my harddisk for old screenshots, pictures, designs, etc. It was a lot of fun to see how our Tool matured over time. The first lines of code were written three years ago.

I would call this my masterpiece of graphical design. 😉 Well, in first place, I wanted to explore the possibilities of SVG. Therefore, I added the very nice gradients, ignoring which color exactly I used. The whole app was written in SVG, even the slider and combo box, which you may see on the top right. The red and green arrows were our toolbar icons, which even had a fisheye effect! (I still don’t know, why we remove that gimmick…) I even found an old version of the sources which I was able to deploy on our test machine to play around. The next major version was the introduction of the ExtJS library, which made pidoco look like this (December 2007):

20sitemap_initial

With this step, the application made it form a prototype to a real app that was, to some extent, usable. Our very first beta testers use pidoco with this look. To be honest, we should have paid them for the pain they had using pidoco… But we learned a lot and further improved both the interaction design and the graphics design. Here you can see an intermediate draft, which looks quite similar to the current version (compare: https://pidoco.com/preview):

30Interfacebsp_1

Prototyping is also Testing

Yesterday evening we had an exciting session at our local Usability Meetup. The topic was “remote usability testing”, which we divided into asynchronous and synchronous testing. The part of asynchronous testing was covered by Sabrina Mach from FeraLabs, who came from England to visit Berlin.

During the second part we explained synchronous remote usability testing. The setup is very simple, a moderator invites a test user via the web to a moderated usability test. We were able to demo for the first time our remote testing module, which allows for executing remote usability tests for pidoco° prototypes. Our development team did a great job during the past year to develop a system where the test user is invited by a simple email and just needs a browser, an internet connection, and a telephone. The moderator can watch the session live and later on replay the whole session for a detailed evaluation. The Remote Usability Tester will soon be available as closed beta. Watch this blog for further details.

After the presentations we moved on for some drinks with still a big group of people. It has been a pleasure to chat with all the people, especially with our guests from England. The next event will be Friday 17th when the 10th IA Cocktail Hour takes place. See you there.

From Paper Prototype to Implementation in 3 days

Since yesterday we have support by three students from Hasso-Plattner-Institute, Marika, Michael, and Sebastian. They will help us implement pidoco°, such that we can reach a version 1.0 in September. Our first impression after one day: excellent students and great support for us!

However, we faced the problem that our not so large office has to accommodate three more people. Being (kind of) usability professionals with engineering background we started with a nice paper prototype…

… then tried some high fidelity implementations …

… to finally have an arrangement that made us happy: