wireframe website, wirframe, wireframes

Prototyping Tools for Programmers

Using a prototyping tool means being able to design a prototype of a web or mobile application without the need for programming skills. All the prototyping tools I know of function with a drag and drop technique. You can simply click on the predefined UI element and drag it into your screen. Working with prototyping tools to design wireframes of the product you are planning is helpful during the process of conceptualization. First of all, ideas can be visualized. Mostly the concept is then more specific than a written text for example as there is no way of avoiding certain aspects of the functionality. Secondly, the use of a prototyping tool enables good communication in your team. The hand-written design of the mockups that prototyping tools often offer motivates people to criticize or come up with new ideas as they feel the conceptualization is still in progress.

The wireframes can be easily changed (e.g. if you need to modify basic parts of your prototype). And thirdly, you can run usability tests in a very early stage. Working in a team, testing and involving other stakeholders in the conceptualization prevents you from making mistakes in the UI design and helps you to create a satisfying interface. These are all advantages of working with a prototyping tool. I am often surprised when people still think they don’t need a prototyping tool, because they can code. It’s not about your programming skills. Even a programmer wants to save time, doesn’t he? Besides, the prototype can be used as specification for developers. Well, in any case a prototyping tool saves time and money – no matter if you are an UX designer, a programmer or any other person involved in the project.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

Learning Interface Prototyping

At many modern universities it is now possible to study ‘interface design’ or similar majors. There is also a wide range of books, internets sites and workshops on the subject. However, as with everything else you don’t learn interface prototyping passively. You need to try out. My advice is to work with an online prototyping tool. Wireframing software gives you the option to carry out interface prototyping without a lot of knowledge. These often have predefined screen sizes and a range of UI design elements. You just drag and drop them on your screen.

I know what you just think. I have no idea what a website includes. No worries. Just take a screen shot of your favorite website and upload it in your prototyping tool. Step by step you can overlay the elements of the screen shot with elements of the editor and then delete the background. Et voilà – you’re in the middle of interface prototyping. Of course interface prototyping includes more than just copying existing pages and there are a lot of rules to learn, which are not obvious. But to just start with this method will help you to take notice of things you didn’t think of before. It will teach you to get a feeling about the whole process of interface prototyping and then – of course – you have to attend all the lecturers, read all the books and visit all internet pages to become an interface prototyping expert. I hope you learn a lot along the way.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

UI Prototyping – Beginning Again

Design can often be a complex task and it can be easy to get bogged down in a project. There would be times when we would be focusing on the small details and not realize that some of the fundamental aspects of our design were wrong. At these times it would often be best to go back to the drawing board and start again. When working on improvements or the redesign of an existing website, sometimes it can also be a good idea to start from scratch. For this, I use UI prototyping software. With UI prototyping, I can create wireframes – the bare bones of a website layout- or I create more detailed designs.

With the UI prototyping software I use, I take screenshots of the existing website and upload these as background images for my prototypes. I then overlay rectangles and other elements over the top and then delete the original screenshot. Then I am just left with the current structure of the website without focusing on the graphic design. In my UI prototyping tool, I can restructure the navigation and layout of my pages according to what will be best for my user. This gives me the flexibility to change the structure, and be confident that I have missed no important details from the existing website. With UI prototyping, I can begin again with the same navigation elements and call to action buttons, but can be confident I have not missed anything important out. I recommend UI prototyping to anyone who wants to go back to the drawing board with their projects.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

How to Test which Content Sharing Strategy is best for you

In today’s world social networking has become an important aspect of a lot of people’s lives and businesses also see the potential in this. Likes on Facebook and shared URL links via email may increase the traffic on you website. But what’s the right strategy to encourage users to spread the word about your articles, blogs or products?

Using interface prototyping for content sharing integration

Many interface prototyping tools now offer the Facebook, Google+ and Twitter buttons, so that you can plan where you would like users to share content from your website. While it can be tempting to add as many of these icons as possible to your prototypes, you should consider the value they will give your page and your user. Too many share buttons can be distracting and you don’t want your user to leave your page entirely to go to a social network.

Depending on your project, different ways of interface prototyping can be helpful. It can be useful to sketch out your ideas quickly on a piece of paper first, especially if you carry a notebook around with you. You never know when you might get your next brainwave. I’ve often used online-based interface prototyping tools in the past, some of which have collaboration features. On my last project, for example, I was able to collaborate with the social media team to see what social media icons they wanted and where these should be placed. The advantage of using an online wireframing tool was that we could link the social media icons in the interface prototype and link these up to the social media pages. In user testing this was particularly useful, as we were able to simulate the experience of sharing content from the website.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

UI Prototyping – How to Select UI Elements

When you’re creating a new UI design, it can sometimes be tricky to decide whether you should use common UI elements or include innovative features. I often find it can be useful to create an initial prototype with a UI prototyping tool. There are some tools that have predefined elements and this helps me with inspiration.

UI prototyping and User Testing

Even if we don’t notice it, the world is overloaded with information. We only discern a fractional amount of all advertisements that surround us in our daily life. But how do we decide what we read or take a closer look at? The human brain is complex. On the internet for example, people learn to scan a page. We don’t read, because there is often too much information on websites. We only skim the text. And we expect things to be familiar. For people who grew up with cars driving on the left-hand side of the road, it’s difficult to adapt to driving in foreign countries. This is one thing we should keep in mind while doing UI prototyping. This is a great analogy if you want to think about the usability of your application.

Proving assumptions with UI prototyping

You may think you know your users inside out, or that the application you are planning will be user-friendly, but even the best designers will not know how an end-user will respond to their application. For this reason, many designers carry out UI prototyping, so that they can draft a user interface design and get feedback early from users.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

UI Prototyping advice for usability testing (I)

Usability testing is an important process, which can be used to help refine a UI design and increase the usability of an interface. In many cases a prototype of an interface is created because web specialists would like to test the concept with actual users. I decided to put together my advice on the best UI prototyping practices, particularly if the prototypes are to be used for usability testing.

The number one tip of UI prototyping for usability testing is that prototypes should look a lot like the ready interface. A common mistake that some UI designers make is being guided by the restrictions of the prototyping tool to create a design.  UI prototyping should be done when the design idea is already formed in your head. Do the design work first, and then see how the UI prototyping can be done with your specific tool.

When a designer starts with UI prototyping, they get caught up in the process of “playing with stencils” in their UI prototyping tool. As a result, the UI prototype may look great but somewhat detached from reality. In order to perform usability testing on a prototype it has to resemble the interface down to details. One of the things that I recommend is avoid using the standard ‘Lorem Ipsum’ text blocks because not all users are familiar with them, and that may distract them from the real purpose of the exercise. Using the actual text may be impossible at the UI prototyping stage, but having a text similar in meaning can reveal more about the purpose of the page.

Read more tips on UI prototyping for usability testing in my next blog post.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

UI prototyping as a Website Development aid

As websites and applications get more and more complex, UI prototyping has become an important process in conceptualizing websites and software designs. Ten years ago, websites were simple. Nowadays they are interactive and the user is accustomed to a certain standard. With UI prototyping all the needed requirements are better set than starting to program right from the start.

How does interface prototyping function?
Interface prototyping means that you create a prototype of the interface design of a webpage or software application. Every sketch of the desired product would be interface prototyping. The simplest way is probably paper prototyping, but you also have the option to do interface prototyping with an online wireframe tool. With most of these tools you can create clickable prototypes (also called wireframes) of the website or application. One might think that a simple paper sketch would be enough to set the UI design requirements such as layout, but let me explain why more complex proceedings are often better developed with high-fidelity interface prototyping.

Interface prototyping isn’t only about the look
A modern webpage does not only have to look good. Primarily, interface prototyping is not about colors or button shapes, but about linking and other functions. Linking means that one clickable link leads the customer to another page. Interface prototyping with interactive wireframing software can simulate these requirements in a prototype. UI design experts can use these mockups for usability testing or simply to talk about the project within the team. (Visualized ideas are often easier to understand than describing them in words.) It then can be changed easily, without to rewrite lines of codes. Therefore, interface prototyping time and helps to design a good working and satisfying product.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Design, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , | Leave a comment

Prototyping Tools Drive Innovation in Industries

A lot has been written on the benefits of prototyping tools in user interface design. Many industries, however, make use of prototyping tools. Particularly, 3-D printing has found use in about any industry.  That is not surprising: the more expensive and complicated the development process is the more the industry can benefit from using prototyping tools. The automotive and the medical industries are just two examples of such industries.

Recent years were marked by the establishment of companies that specialize particularly in prototyping tools for innovative technologies. One of such companies, Medtronic Sofamor Danek, comes up with individual solutions for various medical needs. Their mission is “transforming technologies to change lives”. Indeed, with the help of prototyping tools they can create completely new instruments that were inaccessible before. In this company prototyping tools help not only save money on the development of the new tools but also create something completely new that will improve medical procedures and change many lives.

Medtronic Sofamor Danek often has direct contact with surgeons who basically come to them and explain their challenges. The company engineer will then with the help of a CAD prototyping tool create a prototype of a tool that meets their needs. The company uses a 3-D printer to deliver the solution to the client. The prototyping process can take as little as one day.  The recent instrument that Medtronic engineers designed was a tool used for fastening screws to a corrective vertebral implant. Current technology required surgeons to use two separate tools in the procedure. The newly designed tool combined the functionality of the two and reduced surgeon’s work and the impact on the patient.

Prototypes designed in with the help of prototyping tools can be examined by various experts and improved immediately. It is predicted that medical prototyping tools and the 3-D printing technology in particular will drive a lot of innovation in medicine as well as in other industries.

Posted in Prototyping Software, Prototyping Tool | Tagged , , , , , | Leave a comment

Prototyping Tools and Turning Back on your Plan

I recently read a blog post by the Berlin-based startup 6-Wunderkinder, which described how the company had decided not to pursue their app “Wunderkit” and rather focus on their original concept “Wunderlist”. It is a brave decision to admit when a product is already finished that the product just isn’t working, is too complex, and is not solving the problem it was intended to. From experience I know that the further on during a project I am, the more difficult it is for me to admit that a concept isn’t working. This is why I always create prototypes of everything I do using prototyping tools.

How can prototyping tools help?

Prototyping tools can be used to create concepts at the beginning of a project and can also be used for more detailed plans of how an app or website should look and function. One of the benefits of using a prototyping tool is that they often have collaborative features and can be used to create interactive prototypes. With detailed prototypes that include interaction, you can use these to show to test users for feedback. These prototyping tools range from wireframing tools- which are used to outline the blueprints of your ideas- to high-fidelity tools.

How to use prototyping tools

To avoid disappointment, I would recommend that you create a handful of design ideas for each concept you come up with. If you are passionate about an idea, by all means create wireframes with a wireframing tool and see if you still believe your concept could work. Make sure you keep things simple, remember what your initial intention was, and ask others for feedback. If your first set of wireframes passes the test, then create more detailed prototype pages of these. At each stage, test out your prototype on end users and other stakeholders. See if you still believe in the product you are creating. If your prototype doesn’t pass the test, you can start again with a prototyping tool. If it does, you can be confident in your idea. Remember, it’s always best to be honest with yourself and your team about when a concept isn’t working. But in many cases it is easy to save costs and heartache by testing out your ideas with a prototyping tool first.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Wireframe, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software, Wireframing Tool | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment

UI Prototyping and email applications

According to statistics, an average Internet user has more than one email account.  Many people, like me, have one official email address and another for signing up for various services, which frequently collects a lot of spam. My official email recently started receiving spam as well, so I had to change it together with a service provider. Similarly, many users migrate from one provider to another looking for better service or a better login name. This is what makes email service a competitive environment. What does this all have to do with UI prototyping, you may ask?

UI prototyping has to do with the user interface design of email applications. In this blog post I would like to discuss what it is that attracts a user to this or that email provider. For me, it’s mainly the visual design and the registration process. The registration is basically the process of filling out a form, and how convenient and fast the process is determines whether the user proceeds. From personal experience I know that users do not like to register so with the help of thorough UI prototyping we can create the process which will not be a burden to users.

How can UI prototyping help us create a winning email service? Using a good UI prototyping tool we can sketch the whole registration process and test it on a potential user. One important rule of UI prototyping for an email application is to make the processes as short as possible and give the user indication of what to expect. Some email services, for instance, allow you to take a tour. UI prototyping can be useful for deciding what information to reveal to user and in which order. I personally like the websites that tell me what benefits I get from registration with them, what their service is like and how many steps there are to register. In my next blog I will explain UI prototyping for an email service in more detail using Google mail as an example.

Posted in Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Prototyping Software, Prototyping Tool, Ui Prototyping, Wireframe, Wireframe Software, Wireframe Tool, Wireframes | Tagged , , , , , , , , , , , , , , , , , , , , | Leave a comment