Wireframing Tool definition

A wireframing tool is a program or software application that people use to sketch out wireframes. A wireframe is a low-fidelity visualization of a user interface and wireframes are used to focus on the layout of the user interface. In other words, the wireframe is used to show where elements appear on the user interface, rather than to show in exact detail how these components will look. A regular wireframe does not contain any functionality per se, because it is just a prototype for a finished application. Clickable wireframes add some simulated functionality however and some wireframing tools offer this feature.

So if you are considering using a wireframing tool for your fashion app, here are two major wireframing tips for using wireframing tools.

Design your draft, but be open to change

It might be that when you think of the design in your head it ends up being very difficult to program in the end. You can consulate a web-designer about what may work best in your case, and adapt this with a wireframing tool. Wireframing tools are designed to help you do the designs quickly, so don’t worry about changing your mind.

Consider your user

Even though it makes perfect sense for you to have the design a certain way, remember to consider the vast majority of other potential users. Ask your friends and see how they interact with the app design. If they have trouble figuring out how to use it, note the problem areas and revise the design. (This is called usability testing and some wireframing tools have usability testing functionality integrated into them so you do not have to get a separate program. Just look around for the wireframing tools available.)

If you do these two things with your wireframing tool, I think you will see improvements in your application and in your wardrobe.

Firstly, decide on all the information that you want to put on your page. The wireframe is a perfect guide to show you how much space you have available for your eloquence. The truth is that Internet browsing is extremely fast-paced, and nobody reads lengthy and detailed descriptions to the end. The shorter and the more to the point the text is, the more likely it is to be read. According to studies, most users leave websites after ten seconds and hardly anyone stays after a minute. So choose carefully which texts will make it to your one-page wireframe.

The second step is actually organizing the important pieces of your wireframe. Ideally, any texts, images or buttons that you want to be noticed should be visible without scrolling the wireframe. Information of secondary importance or SEO texts can go on the bottom of the wireframe. Resist the temptation to cram everything you had on the website before onto your newly created wireframe – this is why we had the first step, where we carefully selected the elements to be included. The content of your wireframe should convince the visitor to stay. Do not forget about the call to action and your contact information.

Lastly, test your wireframe on users. Make sure that it is simple and clear to users, that they find what they were looking for and that they are not overwhelmed with information. Otherwise, go back to the first step and revise your choices. Good luck and happy wireframing!

Most importantly, there is no uniform screen size for mobile devices. Even though computer screens also vary in size, mobile screens are much smaller and the difference has an immediate effect on user interface design. One way to cope with this problem is by creating scalable wireframes. With the help of scalable wireframes, web developers and UX designers can demonstrate how the interface design changes depending on the mobile screen size. Most wireframe tools do not provide a function like this but I think in the future that scalable wireframes will become indispensable for mobile interface design.

An important consideration in mobile interface design is that a mobile screen cannot contain the same information as its desktop counterpart. Scalable mobile wireframes would help determine which elements of the user interface design would stay and which would be eliminated. When it comes to mobile user interfaces compromises cannot be avoided. A wireframe responsive to different screen sizes would help determine the best layouts of the interface which would help designers ensure that their designs are optimized for the most popular mobile devices.

Wireframing tools for ice skating apps
For example, you could have an app that allows you to gauge your technique in an ice skating sit spin. The iPhone could be with you as you spin, placed somewhere secure of course or with your coach while you wear an additional transmitting device. The app would then display the angle degree that you are spinning and could even make suggestions as to how you could improve, such as your redistributing your weight toward the toepick instead of the back of the blade. This app could also gauge how fast you are spinning and how many calories you burn so you can balance your diets for competition.

Brief wireframing tool description
A wireframing tool is software that aids in designing websites and apps (including for iOS). Some types of wireframing tools can also allow a person to collaborate on a project – which may be good if you and your fellow students want to do a class project together on a new app design. These wireframing tools can also include simulation capabilities and usability testing (although not every wireframing tool will have usability testing incorporated into it). The goal of using a wireframing tool is to be able to sketch out and modify a design for an app, without having to program it first. Once the design concept in the wireframing tool is defined and all the issues have been “ironed out”, then it can be programmed. This is like ironing out all the wrinkles in your shirt before you wear it…instead of wearing it, seeing the wrinkles, then ironing it. (It saves time).

Wireframing tools for thought
So, while you are waiting for your HCI design class, you can think about all the possible apps you could design for your own sports or hobbies. Who knows, it could mean a better exercise routine, or the next Angry Birds edition after Space. It all depends on you!

UI Prototyping and HCI
The dearth in the UI prototyping found in the study included a lack of collaboration with HCI experts during the UI prototyping process, the software engineer’s lower knowledge concerning HCI especially in its application to UI prototyping, and lastly, the lack of utilization of end-user contact in UI prototyping. This blog will provide a brief review of these ideas with regard to the UI prototyping process. They also posed numerous questions on how to alleviate them. The reasons for the lack of HCI in the UI prototyping process were not discussed.

UI Prototyping Solutions offered
There are several possible solutions for including more UI prototyping in HCI. One solution for the UI prototyping issues offered by the authors of the study is a mandatory HCI education. Other solutions in the proposal include a possible “return on investment” calculation and incorporating User Centered Design with the “engineering methods” used.

UI Prototyping and HCI Education
Educating the engineers themselves seems a plausible approach to remedying issues with UI prototyping, however the main issue for the failure to include HCI or UI design in software development may be of a more basic nature. For example, it takes more time to collaborate and consider HCI in the UI prototyping process. If this is the case, perhaps incorporating a collaboration tool for prototyping might reduce the demand on software engineers or even make the collaboration with end-users more enjoyable and thus potentially encourage them to include or at least consider HCI design in UI prototyping methods. Before the reasons for their UI prototyping methods are adequately investigated however, solutions may only reflect a simple guess and check structure.

The London Underground is being upgraded with a wi-fi system on some of its lines for the Olympic Games. For the duration of the games this service will be free. There are many apps that developers can create to take advantage of this wi-fi upgrade and many app creators are using wireframing tools to help them with this. The most obvious benefits for passengers that use these apps will be that they will be able to plan their journeys and find out about possible disruptions while they are on the go. However you can be more inventive with the apps you create. Wireframing tools are a great way for people to prototype devices and can help you produce apps quickly and cost-effectively in time for the games.

Wireframing Tool for Apps

A useful app that you can take inspiration from is an app for disabled people living in London. This app shows information on where disabled tube stations are, disabled toilets and restaurants and shops with disabled access. This is an app that is targeted at people who are travelling around London. When you use a wireframing tool to prototype your app you must think of your user. Wireframing tools can help you experiment with ideas and give you the possibility to show the prototypes you create to potential end users before you implement the apps. You can then get feedback on the prototypes and optimize certain elements in the wireframing stage before going into development.

The London underground wi-fi system will have limited availability and at first will be rolled out at the tube stations themselves. This means that while a passenger is travelling between stations, they will not have uninterrupted access to the internet. The app you design should therefore take this into consideration. A good example would be a news-feed app in which updates can be downloaded regularly, or a game which can be downloaded quickly. Either way wireframing tools are a great way for you to design great apps that Londoners and visitors to the Olympic games will love.

Goal of the wireframe:

Create a wireframe of a home page of a non-profit organization with focus on navigation design.

Here is the wireframe:

The Pluses of the Wireframe

The wireframe above shows a simple and straightforward website structure. There is the main navigation with four tabs on top and more detailed additional navigation on the left.

What I like particularly about this wireframe is that the button text explains what the buttons are meant to do. For navigation design we usually create low fidelity wireframes because visual details are not important. It is also not necessary to display actual text or other content on the wireframe as it may distract viewers from navigation concepts. When creating a wireframe illustrating navigation it is a good idea to use explanations of what every menu, button or link serves for. What is inside text boxes is secondary, so, as on this wireframe, contents can be replaced with dummy Lorem ipsum filler text. The actual wording might be the next step.

The Minuses of the Wireframe

While this wireframe is consistent in button design, other navigation design elements lack consistency. I would attempt to use more general descriptions for navigation menus on top and on the left. When I look at the headings I wonder where the “Our Readers” tab would take me. So this wireframe makes me think of a better wording instead of improving the navigation design.

I would like to underline that sometimes it makes sense to show actual text on low-fidelity wireframes. This is usually the case when a wireframe displays a website’s information architecture. In general though, I would prefer to use general labels to keep my customers focused on the right things.

Goal of the wireframe

Create a low-fidelity wireframe of a personal blog focusing on navigation

Here is the wireframe:

Problems of the user interface design

Firstly, let us find all links on this wireframe. This simple task brings out the main problem of the wireframe: it is not possible to tell underlined text from links. It is also not clear from this wireframe whether images on the right are clickable or not. Everything I said about the design of buttons before applies to links and clickable areas. Since they are part of navigation it is important that the user notices them.

This wireframe is a good example of something that should be avoided – the use of underlined texts which is not meant as a link. Underlining is one way to emphasize links. Their position on the page is also relevant. For instance, the list on the left side of the wireframe is more likely to be links than the list on the right side because we expect supplementary navigation on the left. Padding or clickable areas around a link visible on hover could be another way to emphasize links. One could show them on a wireframe as a slightly darker rectangle around the link.

Links carry an important navigation message, which should not be forgotten.  They show to the visitors the pages they have already visited. It is standard to color visited links purple, while unvisited links remain blue. Perhaps, a low fidelity wireframe is not suitable to talk about colors. For that purpose we would rather use a high-fidelity wireframe or a clickable prototype. But it is at this stage of development that navigation issues should be addressed.

In my next post I will talk more about the appropriate fidelity of a wireframe for navigation design.

Goal of the wireframe:

To showcase a page representing a personal blog of a politician. The wireframe uses low fidelity to emphasize the size, labeling and position of buttons.

Here is the wireframe:

This wireframe reveals a few problems with the design of buttons. To begin with, the meaning of buttons in the top navigation is not sufficiently clear. Low fidelity of the wireframe only emphasizes this issue. If this wireframe was done in high fidelity and buttons were colorful we might not be able to see that apart from the first, home button, the icons are not obvious at all. Perhaps, the designer assumed that the user can guess navigation or hover over the buttons to find out what they are. However, from this wireframe it is impossible to understand where these buttons take the user. The solution would be to put straightforward text labels next to icons.

Another problem that I can see on this wireframe is that button labels on the page have the same font and the same background color as the rest of the page. Perhaps, the color scheme is explained by the fidelity of the wireframe, but the font should be slightly bigger than the rest of the text.  It is also useful to be consistent in labeling, and use either verbs or nouns (or verbs with nouns together).  On this wireframe the author attempted to use verbs, but I would suggest supplementing them with nouns. The message and the call to action would be clearer if buttons said “Submit Comment” or “Subscribe to Newsletter”.

Lastly, as I already mentioned in previous wireframe reviews, it is not a good idea to put a “back” button only at the bottom of the page. Users should not have to scroll down to find this button.

To sum up, buttons should be prominent, large enough and consistent between themselves and with the rest of the website. In my next post I will continue analyzing wireframes that bring up button design and other important user interface design issues.

Goal of the wireframe
The wireframe below represents a home page of a multimedia company. The wireframe is done in low fidelity to focus on the navigation design of the website. Here is the wireframe:

The Pluses of the Wireframe
I like this wireframe because it is simple, low-fidelity and shows instantly just how inconvenient the navigation is. The wireframe’s fidelity makes the problem more visible – colors and images would distract us from navigation.

The Minuses of the Wireframe

I have no criticism of the wireframe itself. What I would like to discuss in more detail is the usability of the navigation concept. According to the wireframe, in order to get from one page to another the user has to click the radio button that corresponds to the page they want to go to. After they check the radio button the content scrolls to the needed position. To be fair, even on the low-fidelity wireframe the design concepts look original. Moreover, the wireframe shows that some principles of navigation design were observed: the design is consistent, and the user can see where he is.

Nevertheless, the wireframe shows a somewhat unusual navigation pattern that many users may not be familiar with. What struck me when I saw the wireframe first is that there are too many items in the navigation menu. To make it worse, you have to read all of the text sideways. The website seems to be relatively small, which is why I would recommend keeping only the main items for the top menu. In my opinion, a radio button is not an appropriate way to select the needed page. It is bad for two reasons. Firstly, it is hard to see which one is selected at the moment. Secondly, would such a minute click area be convenient for everyone (like older people)? I would much rather use a few horizontal tabs.

While the wireframe itself is well-done, the navigation concept should be reconsidered in this draft. Usability testing with this wireframe would probably reveal that users are accustomed to tab navigations on websites. In further wireframe reviews I will address more elements of user interface design and usability flaws related to them.