wireframe website, wirframe, wireframes

The online wireframe tool vs. paper prototying

Designers often create wireframes in the initial stages of a website design to help them visualize what the layout of the final product will look like. A designer can sketch the basic layout of a web page with the key features on paper, but online wireframe tools are becoming more and more popular in this process. When should you use online wireframe tools and when paper prototypes?

Paper prototyping
Some designers believe that they can be more creative with a pen and paper. Sketching wireframes onto paper can be done quickly, which is good if you have a sudden wave of inspiration. If you are working with stakeholders they may find it easier to sketch their ideas for wireframes on paper, before getting to grips with an online wireframe tool. To help in this process of wireframe design, there are types of paper available on the market with life-size motifs of different mobile devices. This helps you focus on the size available for your design and makes your wireframe sketches look more professional and true to life. Unfortunately, paper is not very adaptable to changes and trying out design alternatives becomes really cumbersome if you have to re-draw the wireframe each time you want to try out a slightly different variant. It is also difficult to pass the paper prototypes on to others without scanning or photographing them and sending them via email or the like. So critical feedback loops often become time-consuming and valuable project time is lost in the process.

Online wireframe tool
The online wireframe tool has the advantage that you can save your wireframe designs online. Some online wireframe tools let you share your prototypes with friends and colleagues for collaborative editing or reviewing and continue work on them at a later date. Unlike with creating paper wireframes, online wireframe tools make it easy to modify your existing wireframe design by moving and deleting elements as you go along. This is a very convenient way to create and test various design alternatives before converging on one. Some types of online wireframe tool allow you to reuse elements of your wireframe design. This is particularly handy if you have elements, which are repeated throughout your webpage or your app, because you can retain consistency, or to easily create a large number of possible variants of your wireframes. Another benefit of using online wireframe tools is that your prototypes often look more professional if they are generated from a computer. What’s more, online wireframe tools allow you to see your prototypes through your computer screen. That means that using an online wireframe tool puts you in the context of a user who is sat at his computer. In usability tests you will be able to create a much more accurate user experience by putting your wireframe prototype up on screen. This means you will get more reliable feedback than you potentially would from a paper wireframe.

Choosing to work with an online wireframe tool
Whether you choose to sketch out your wireframe on paper, or wish to use an online wireframe tool, prototyping is a great way to help you draft and redraft your initial ideas. Paper is a medium we are all used to, and some people believe they can be more creative using paper to create wireframes than online wireframe tools. Online wireframe tools have the advantage that you can save and adapt your designs easily. Some people also find it useful to use online wireframe tools, so that they can see their prototypes on screen. Ultimately this choice is down to purpose and personal preference and what you feel most comfortable with for your project.

Posted in Online Wireframe, Online Wireframe Tool | Tagged | Leave a comment

Flipboard’s Magazine Style User Interface Design

If you believe the reports, the internet is killing the culture industry. The Film, music, TV, and print industries all seem to be supposedly stuck in the 20th Century unprepared to truly adapt. There is of course the economical argument that is linked to piracy best exemplified by Napster and other P2P technologies. There is, however, also an argument linked to presentation and service delivery. The convenience of MP3s has meant listening to music of lower quality than, say, CDs or Vinyl. The average video on YouTube usually wouldn’t look great blown-up on a big HD screen! Reading a newspaper online also has issues with regards to readability, findability, and even finishability. Reading a paper from end to end provides you with a day’s worth of news but the user interface design of most news websites offer a non-linear web that breaks up content.

For all the wonders of the web some old-school conventions have their tried and tested practicality. The Flipboard iPad app bridges the old and the new in a familiar yet unique user interface design. Essentially Flipboard is an aggregator of sorts  that you can customize to provide you with all manner of feeds from different news sources. You can even link it to your Twitter and Facebook account to receive status updates (and photos etc.) in a glossy magazine style user interface design. The use of the skeuomorphic user interface design here is excellent as users intuitively flip through the magazine as it were. Touching an article zooms into it as it fills the user interface design. Of course what Flipboard does that a magazine does not is things such as displaying videos or providing links to share etc. The iPad’s touchscreen is naturally a great fit but I think Flipboard could also be great as a desktop software, particularly with trackpads now supporting multi-touch gestures.

Posted in Ui Design, Ui Prototyping | Tagged | Leave a comment

Mobile app design tips

Mobile applications are quickly developing into the main method of content delivery for users, and as a result, it has become paramount for user interface designers to ensure that they deliver mobile app UI designs are characterized by great usability in order to ensure increasing consumer uptake levels.  In layman’s terms: How can user interface designers create mobile applications that users actually want to use?  Below are a few examples of things you can do as a UI designer to make your user interface design competitive and popular:

  • Design small: since smartphones are not desktops computers, user interface designers need to remember that mobile apps operate with limitations.  Above all, remember that smartphones have limited screen space. Don’t create pages that are loaded with content that is unclear and poorly organized.  Make sure that each page of you mobile app’s user interface design clearly leads the user through the pertinent information and effortlessly connects the user to the next page. One task per page can be a good guideline to ensure high usability of the mobile user interface design.
  • Design for “on the move”: Mobile apps’ greatest attraction and convenience is that they can be used on the move.  When designing a mobile app user interface, remember that users are typically employing mobile apps in transit.  Consequently, you must fill your user interface design with short cuts instead of superfluous information.  The more your user interface lends itself to on the move use, the more likely it is to be popular among users.
  • Design for various operating systems: One of the surefire ways to ensure a popular mobile app is designing it to be used on more than just the iPhone platform.  Making the app compatible with the Android platform or the coming Nokia Windows phone portfolio will expose your user interface design to a wider array of users and facilitate a likely increase in its popularity. Yet, remember that each platform may come with its own peculiar requirements for great user interface design.

The abovementioned tips will help you tune your mobile app’s user interface design to achieve the highest usability possible when you are designing a user interface for a mobile app.  Above all, it is important to remember that smartphones are small, so make sure you have a design that comfortably fits into the space given, don’t clutter it.

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

Low-fidelity wireframes are important too

Systems that are complex are often taken as a sign of something sophisticated, advanced, and ultimately more useful. Systems that are simple are often (but not always) taken as something inferior or lacking in creativity.  However, in the world of UX design, complexity (as many good interface designers know) often adversely affects the popularity of a user interface design.  The power of simplicity as a means of creation is thus not to be underestimated.

The complexity vs. simplicity conundrum can be applied not only to the end product of a design process, the user interface, but also to the design process itself. One UX design method that swings back and forth along the pendulum of this dichotomy is wireframing.  Wireframes can be divided into low-fidelity (simple) or high-fidelity (complex) wireframes. High-fidelity wireframes are often praised for their refinement and ability to include a range of design elements such as logo, images, color schemes, and other basic graphics.  While high-fidelity wireframes present a very detailed impression of the future application, it is important not to get caught up in the tendency to rate them as superior to low-fidelity wireframes.  Low-fidelity wireframes, which can be as simple as a sketch on a piece of paper, are important too.  Low-fidelity wireframes are simple and therefore make you less susceptible to design quagmire.  Additionally, low-fidelity wireframes help you understand the space, balance, composition, and scale of a user interface design.  The rudimentary nature of low-fidelity wireframes helps interface designers and other stakeholders like test users focus on the big picture and can prevent the pitfalls of over-designing or creating end products that lack basic usability.  Keeping the structure of a wireframe basic allows interface designers to build a basic model of a user interface design that can be translated to UI prototypes which can be used to flesh out the rest of a user interface’s specifications.

Low-fidelity wireframes are important and simplicity as a mantra is important in user interface design.  This is not to say that high-fidelity wireframes don’t have their place in the user interface design process but as Oscar Wilde said “Life is not complex. We are complex. Life is simple, and the simple thing is the right thing.”

Posted in Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe, Online Wireframe Tool | Tagged , , | Leave a comment

Using Wireframes to Create Better User Interface Designs

Wireframing (also spelled wire framing and wire-framing) is an indispensable ally in the creation of better user interface designs. As the adage goes, if you fail to plan you are planning to fail. When creating user interface designs of websites and web apps wireframes serve as the blueprint plan for a solid foundation. Wireframes detail the layout of a user interface design in order to ascertain if the concept works. Wire frames are an effective communications and collaboration tool allowing teams to express user interface design concepts quickly in the form of rapidly generated visuals without having to worry about visual design details in the early concept stages. Remember: A picture is worth a thousand words! Wireframes thus allow all stakeholders of a project to be involved and provide input, where traditionally only the technically versed team members were able to fully understand the proceedings.

Wire-frames can be created with paper and pencil or specialized wireframe software. Paper and pen are ubiquitous whereas wireframe tools allow UI desginers to digitally create wireframes. The advantages of wireframe software include added functionality, such as creating interactive, clickable wireframes and iterating over re-usable or adaptable wireframes more rapidly. In this sense wireframing tools are an ideal fit for rapid prototyping processes. The objective when wireframing is to create sparse, spartan prototypes of user interface designs, the focus being functionality.  In effect this means paying attention to tab buttons, checkboxes, and dropdown menus etc. rather than, say, font used or background color. This allows user interface designers to create streamlined, clean wireframes of user interface designs that live up to the ‘less is more’ credo. Conducting usability tests with UI wireframes helps user experience designers further discover usability issues inherent in a proposed user interface design. Some online wireframe tools, such as Pidoco, allow users to conduct remote usability tests directly without the need for additional software tools.

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

Wireframe Creation for Dummies

In this short tutorial we want to give a quick introduction on interface and web wireframing. What are wireframes? Why use wireframes and what can you do with wireframes? When these questions do not ring a bell, you should definitely read on.

What is a wireframe?

A website or interface wireframe is a first visual outline used in interface design and web development. With a wireframe, you plan and communicate the overall idea and structure of a website and specify it down to its pages. Wireframes have first been used in rapid paper prototyping in which interface concepts are drawn by hand with pen on paper. All elements of the website are just outlined (in the narrower sense of the word) and placeholders for pictures and other content (e.g. text) are used. Typically, wireframes with all link structures are completed before any artwork is developed.

Why use Wireframes?

Wireframes help you to go the long and rocky road from a general idea for a website to the specification with all detailed information for the designers and programmers. The important thing is that web design is an iterative process where new ideas and requirements turn up while developing the site. Therefore ideas that seemed good at the beginning turn out to cause problems when the website concept gets more and more into detail. As an example, a horizontal navigation bar might be a good choice in the beginning, but later turn out to provide not enough space for all navigation topics, thus navigation in the sidebar is more appropriate. Imagine you spent hours of work on designing all pages in detail with the horizontal navigation and now everything has to be changed! In a wireframe these changes can be made in no time and what you have to throw away did not take long to sketch. With a wireframe, you keep your flexibility refining the design concept until the end.

What can I do with Wireframes?

But sketching and refining ideas is not the only thing wireframes are good for! With a wireframe you can communicate your ideas and specifications to other stake holders in the project team. And as we all know, programmers speak a completely different language than designers, with a wireframe both parties communicate in a universal language: with animated pictures! The perfect thing about communicating on the basis of a wireframe is that your programmer can really see and experience what you want, ask the right questions and help finding solutions where certain (may be technical) requirements not have been considered (making changes in the concept necessary – lucky me who created a wireframe instead of spending long hours on designing all detailed pages first). Wireframes and User Testing When you can use a wireframe to communicate your ideas, improving collaboration with other parties, it is also possible to use

wireframes for user testing.

Where certain click paths, functionality and select options had to be explained in words when you have just a paper prototype of your website, new digital and clickable wireframes give you and your test users the whole experience. Just click through your wireframe like a real website and see whether the concepts work with real users. And everything in your concept that turns out to be problematic, can easily be changed – since it’s just a wireframe!

Posted in Prototyping Tool, Ui Design, Ui Prototyping, Wireframe Software, Wireframe Tool, Wireframes, Wireframing Software | Tagged , , , , | Leave a comment

Web Development Outsourcing – getting it right!

Have you ever thought about outsourcing some of your web developments? I did and it caused me a lot of headaches! Outsourcing services like Elance or RentACoder sound intriguing in the first place, and it seems that you get a lot of bang for your buck – in theory!

But the real experience looks quite different! As everybody knows in the web world, there is a lot of room for misunderstanding when it comes to getting the idea of a project across. Even if you design the most important screens in Photoshop so that the coder roughly knows how the style guide looks, there will always be stuff in a static screenshot that can be interpreted one way or the other.

And just telling the outsourcing provider to “get back to me when something is unclear” does not help. To the developer it is absolutely clear what to do and how – but he thinks like a coder thinks and probably not like the marketing person who was posting the web site job on the outsourcing platform.

In other words, a good project description (aka specification) and continuous communication is king in such an outsourcing project. Fine, but here another problem occurs: Ever tried to get your message across in plain English (e.g. via Skype), when your service provider just speaks Hindi or Russian and broken English? This can end in a real disaster (and in my case it did with some of the projects I outsourced through Elance).

Here are some personal tips for everybody trying the web development outsourcing experience:

1. Design screenshots of the most important web pages so that your provider knows about the style guide. Even better: write additional information (like widths and heights) in the screenshot (as an extra layer). That way your outsourcing partner knows that you are fussy about the design (otherwise he will create something just “similar” to your screenshot).

2. In addition to the Photoshop screenshots, provide a clickable wireframe (e.g. created with a web service found on www.pidoco.com) which shows all click paths, workflows and dynamics of your site to be. Through the clickable wireframe, you get all the processes of your website visually across and the coder can already experience your idea like an existing website. This is much more specific (and faster) than trying to describe distinct processes with words only.

3. Add technical annotations in a text document where you reference the screenshots and pages in the wireframe and explain everything that cannot be seen (such as validations for form fields, technical requirements etc.).

With this “Specs Trias”, you are pretty much on the safe side, as your outsourcing provider has a little style guide for the visual design, knows about the processes, workflows and dynamics from your clickable wireframe and has all the technical information needed to get the backend and technical requirements right.

And finally: Make sure, your outsourcing partner constantly stays in touch during all phases of the project through phone, instant messaging or at least email. Another option is to install additional controlling mechanisms such as daily or weekly reports with the current status of the project and even shared workspaces (e.g. a shared server) where both parties have access to and where you can see the your website developing.

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

Usability Methods: Paper Prototyping

“Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work.” – excerpt from the book Paper Prototyping by Carolyn Snyder

What is paper prototyping?

Paper prototyping is a usability method widely used in user interface design, refinement and testing, in a process known as the user-centered design process. It helps developers in creating the interface design of software programs, websites, web applications, and handheld devices in such a way that it meets users’ expectations and needs. Paper prototyping was developed in the mid-1980s, but already by the mid-1990s paper prototyping was being used as an integral part of interface design and usability testing at blue chip companies such as Microsoft and IBM as well as at a plethora of technology and design firms large and small.

Paper prototyping is a form of Rapid Prototyping. A paper prototype is a model of what the final interface design might look like. Paper prototypes are low in fidelity (the level of detail in a prototype) and were originally sketched out by hand with the aid of a paper and pen(cil); hence the name.

Better interface design and other benefits of paper prototyping

Paper prototyping has many benefits for usability and interface design. Paper prototyping does not require any technical skills therefore allowing a wide range of people to be involved and take advantage of them. This is great for facilitating communication within multidisciplinary teams. Paper prototypes enhance communication not just within the development team but also between the team and intended end users. Paper prototypes thus can be used to gather substantive feedback early on in the development process before coding begins, thus eliminating the need to expensively fix usability errors later on. Being cheap and easy to use, paper prototyping promotes rapid iterative development because you and your team can experiment with several interface designs that can be tested for usability. Another benefit is that paper prototypes encourage creativity When undergoing usability testing users will feel more inclined to critique or add suggestions to your interface design on a paper prototype as the prototypes are not as intimidating as a finished, refined application. The low-fidelity nature of paper prototypes also allows for the right kind of feedback. Users should report on the usability of your interface design and not the font being used or other graphic design details that can be added later in the process.

Posted in Online Wireframe, Online Wireframe Tool, Wireframe, Wireframe Software, Wireframe Tool, Wireframes | Tagged , , , , | Leave a comment

Usability Methods in Interface Design Affinity Diagramming

Affinity diagramming is a very simple but powerful usability method for grouping single pieces of information, finding patterns and bringing structure to an unsorted amount of data. Thus helping to understand the underlying system and to process the data that others (users) can find their way around. Affinity diagramming is primary a method for interpreting and evaluating previously collected qualitative data.

When to use Affinity Diagramming?

Affinity diagramming is the right usability method when you have to deal with a vast amount of unsorted data, like qualitative statements from a user survey. And the name says it all: with this usability method you look for affinity in a set of data pieces and plot them on a whiteboard (or the like).

The structured approach of affinity diagramming should always be conducted when there is more than one ‘right’ and teamwork is required to find the best (most comprehensible) solution for the users. Grouping information is a process where the point of view influences the different data groups thus what’s logical from a designer’s perspective might be incomprehensible for an ingenious user not familiar with the site’s context. Bringing different views into the structuring of large amounts of data makes affinity diagramming so objective.

How is Affinity Diagramming conducted?

The easiest and most common way is to write down all single pieces of information on sticky notes and then gather with all participants around the data. When the end result of that sorting and grouping process is for purposes where users are involved, they should also be part of the affinity diagramming team.

When you conduct an affinity diagramming workshop, make sure the group of participants is smaller than 7 or 8, since it is almost impossible to keep everyone focused (depending on the amount of data the affinity diagramming workshop might even take two sessions) and when working in turns participants must bring some patience until all other members have finished.

Note: When there is a lot of data in a non printable format, ask the participants of your affinity diagramming session to write things down on stick notes, so you split the workload.

After preparing the information and getting the users on board, the next step in affinity diagramming is to put the notes on the whiteboard (or wall), grouping similar content in the same area (do not label it yet). When certain groups of your affinity diagram get too ‘fuzzy’, it might be useful to split a group in various aspects (sub groups) so that you keep the data sets consistent.

When you do the affinity diagramming alone, it might also be usable to work digitally (like with MS Excel or mind mapping tools), but when team work is required, it has proven more effective to work offline with pen and paper.

At some time you will have arranged all sticky notes in groups and may do a quick review of your affinity diagram to make sure everybody agrees on the grouping results. For later processing of the data, now it might be useful to name the groups making them identifiable (or when the data sets represent areas on a website, think about appropriate navigation topics or headlines).

What you get from Affinity Diagramming?

Independent of the data, the purpose and the group of participants, affinity diagramming is a simple and cost effective usability method for extracting and grouping ideas from qualitative data and for obtaining consensus on how information should be structured.

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

Usability Methods Explained: Brainstorming

“Creative thinking is not a talent, it is a skill that can be learned. It empowers people by adding strength to their natural abilities which improves teamwork, productivity and where appropriate profits.” Edward de Bono

What is Brainstorming?

A method often used in the context of usability engineering or user interface design, brainstorming, sometimes also referred to as Creative Thinking, Thought Showers or Lateral Thinking, is a process by which individuals or groups can generate alternative ideas or solutions for a specific topic or problem. The term brainstorming was coined by Alex Faickney Osborn in the late 40s and early 50s and popularized in his 1953 book, Applied Imagination: Principles and procedures of creative problem-solving. Brainstorming, a group creativity technique, focuses on generating as large a quantity of ideas as possible with the quality of ideas further down the hierarchy of importance. Brainstorming has two phases of activity with the first, the nurturing phase, being the generation of ideas and the second, the analytical phase, evaluating them.

What are the benefits of Brainstorming?

Brainstorming is not only useful in identifying a wide range of ideas and solutions to problems but also in facilitating group cohesiveness and ownership of ideas. Brainstorming allows to generate many ideas in a relatively short time and requires few material resources. Although some studies have shown that individuals working alone can generate more and better ideas by working alone rather than working as a group, brainstorming can help a group to collectively gain a better understand of the problem space. Other benefits of brainstorming include boosting morale, enhancing work enjoyment and improving team work.

How to conduct Brainstorming

Before the session starts, decide on the question or topic that will be tackled by the group during the brainstorming session. The question should be neither too narrow nor too broad. For example, brainstorming on which font works best on a heading is too narrow and brainstorming on how to make customers happy might be to broad. An example of a more appropriate question might be “What service for mobile phones is not available now, but needed?” If a problem is too big it should be broken down into smaller components tackled by their own lead questions. Before the brainstorming session begins one should have a plan on how to record and keep track of the generated ideas. Various methods may be used ranging from a white-board to post-it notes. Whatever materials you decide on, be prepared and have enough for the session. Adequate breaks and refreshments should be offered to counter brainstorming fatigue.

What are the ground rules of Brainstorming?

Reducing social inhibitions among group members, stimulating idea generation and increasing the overall creativity of the group are end-goals of brainstorming. In order to achieve these there are four basic rules in brainstorming. The first, as a means of enhancing divergent idea production, is to focus on the quantity of ideas produced. By spreading as wide a net as possible the idea is to increase the likelihood of producing a radical and effective solution. Secondly, withholding criticism until a later stage is crucial as criticism may become a bottleneck hindering the flow of creativity. Thirdly, in order to generate a sizable list, unusual ideas should be encouraged by suspending assumptions and looking at the topic from new perspectives. Fourthly, improving on and combining ideas to make better ideas should be encouraged. Clarification of ideas is OK but should be brief and to the point in order to spend as much time as possible generating ideas. Go over the ground rules with participants before the session begins.

Considerations when choosing participants for a Brainstorming session

When choosing participants for a brainstorming session one should aim for enough heterogeneity among the group in order to cultivate diversity in ideas. Conversely bringing in too many outsiders who are unknown to a team may result in the group taking a long time to achieve a comfort level. In the context of user interface design, participants are generally involved in the design of a product. Hence, good candidates are potential users of a product and other stakeholders such as experts in the field for which the product is intended. Although brainstorming can be done individually, the ideal size of a group ranges between five and twelve. If the number of participants is too large (i.e. larger than 12) one should split the group into smaller groups.

Other considerations when conducting Brainstorming sessions

A facilitator with good interpersonal skills is crucial in making the most of the brainstorming session by keeping the focus on the topic, including the whole group in the session and motivating participants. The facilitator should be monitoring, recording ideas and enabling participants to come up with ideas, rather than come up with ideas himself.

Analyzing Brainstorming sessions

After gathering a large number of ideas they must be analyzed. Similar ideas are combined, impractical ideas are discarded and, even, new ideas may be generated. Affinity diagrams are one method of doing so. An affinity diagram, developed by the Japanese anthropologist Jiro Kawakita in the 1960s, is a tool used to organize large numbers of ideas and data into groups and further sub-groups for review and analysis. This is done by recording each idea on cards and notes and those most similar are grouped together until there are no more cards left. The same process is repeated within the groups. After forming these, the brainstorming group chooses the best ideas by voting or ranking the items on several criteria. Another method of analyzing brainstorming data is by using a decision matrix. A decision matrix, is a quantitative method that uses the ideas generated from a brainstorming session and a set of criteria (i.e. cost, form factor etc…) for rating the ideas. The matrix is especially useful for looking at large numbers of decision factors and assessing each factor’s relative importance. Participants score each item and the ideas with the highest average rankings are generally considered further. Other ideas can be stored in a database for future reference or for further sessions.

Posted in Interface Design Tool, Interface Prototyping, Online Wireframe, Online Wireframe Tool, Paper Prototyping | Tagged , , , , , | Leave a comment