wireframe website, wirframe, wireframes

Wireframing tools for mobile devices

Posted on December 30, 2011 by admin

Nowadays, more and more people are using internet phones. With so many people surfing the internet on the small screen, website designers have to consider what translates well to these devices. Wireframing tools are a great way to visualize how your website or app will look and a wireframing tool can also be used in the process of usability testing. The latter lets you see how users respond to the prototype you have made with your wireframing tool. That means you can use your wireframing tool in combination with user testing to work out what mobile phone users want from your website. You can then make adjustments to your design before the programming stage begins.

What should I bear in mind when using my wireframing tool?
When creating a mobile phone app or web page, remember that the screen size affects the way your information will be displayed. Many web designers use wireframing tools to help them visualize this. Remember that on a smaller device, the user interface should have a simple design with information displayed clearly at an appropriate size. Websites often simplify their user interfaces for mobile phones so that the most important information can be accessed easily. A wireframing tool can help you appreciate the small space available on mobile phones and therefore help you limit what information you choose to include in your design.
It’s a good idea to consider what information is most important for the user to access when using your wireframing tool. You might want to prioritize call to action buttons or news updates, depending on what service your website provides. Wireframing tools are a great way for you to work out what the bare essentials of your website are and can help you focus on what you want your user to achieve on your website.

When using a wireframing tool, you should consider that features such as videos and high-resolution images can often slow down the web-browsing experience for mobile users. Above all, remember that mobile phone users will be using your website or app on the go, so make sure that you fully understand the needs of the user and the context in which they will be using their device.

Wireframing tools will save the mobile user experience
With new mobile devices coming out all the time, mobile users make up an increasing part of the web-browsing audience. Wireframing tools can be used to prototype your design across a wide range of devices to see what alterations need to be made before programming begins, saving you time and money.

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

30 Years of the PC and the Evolution of User Interface Design

Posted on August 29, 2011 by admin

August 12th marked the 30th anniversary of the archetypal IBM 5150 PC. In that time the PC has gone through Superman-esque leaps and bounds starting out as mostly an expensive tool that businesses and institutions could afford to an ubiquitous tool such as a telephone or TV set. The IBM 5150 PC wasn’t in fact the only one of its kind but it did become the benchmark for what we now refer to when we say PC. Back then user interface design was a complete afterthought as Microsoft’s MS-DOS was a command line based system. The 5150 PC didn’t even have a mouse for this particular reason. The mouse wasn’t necessary until GUI (Graphical User Interface) operating systems became the standard. The 5150′s CPU clocked in at a speed of 4.77 MHz which seems laughable in this day of quad-core and eight core processors measured in gigahertz!

It is a little ironic that IBM no longer makes PCs having sold its division to Lenovo. With HP announcing that it too will be selling off its PC and mobile devices division perhaps this is indicative of  a new trend amongst PC manufacturers. For the most part the PC remained the apex of computing until Apple released the iPhone and later on the iPad. Much has been said about us having entered the Post-PC era with smartphones and tablets very much in the ascendency. These devices are characterized by the Natural User Interface design paradigm by using more intuitive ways of controlling a user interface design that goes beyond the traditional keyboard and mouse. As Mark Dean, an engineer who worked on the 5150 notes, “innovation flourishes best not on devices but in the social spaces between them”. Thanks to the PC we can now optimize that space.

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

Big week for Apple in the Cloud Computing arena

Posted on June 20, 2011 by admin

The technology community has long been speculating that the leading global brand that is Apple will jump deeper into the cloud computing fray and announce its new internet-based media and storage program at its worlwide developers conference.  While the name Apple usually breeds success in any venture, there is stiff competition in the cloud storage market, with Amazon and Google already heading up successful music streaming services.  So whatever Apple has to offer better be big enough to live up to its pretentious name: the iCloud.

What exactly the iCloud can offer its customers is still unclear.  It may concern itself only with music or it may be broader, encompassing a wide array of media.  Most experts agree that whatever Apple has to offer will be innovative and competitive in this cutthroat market, particularly since there are unconfirmed reports that Apple has been cutting deals with various music labels.  To add to the intrigue surrounding the new iCloud, Steve Jobs will actually be there to present the program in the flesh, indicating that his health has improved after taking a medical leave of absence for the last few months.

One thing that is certain, however, is that the user interface design of the iCloud – just like for most cloud applications – will be a critical factor in determining its success with users around the globe. As a web service that will be used by a broad range of users to interface with their music on various devices like the iPod, iPad or Macbooks, the iCloud must emphasize usability, that is to say, it must be intuitive and easy to use. At the very least, the user interface design must conform to users’ expectations about how to operate the application through its graphical user interface. In the past, Apple has been successful with providing solutions that feature a great user experience. So expectations for the iCloud and its user interface design are high.

In addition to the anticipated announcement of the iCloud, Apple will also unveil its fifth version of the iOS, iPhone and iPod touch.

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

Wireframing into the future

Posted on May 30, 2011 by admin

This blog post is the first in a series of two about the future of the wireframing method.

The use of wireframing in user interface design has become an increasingly popular method for laying the foundation of websites.  A wireframe is a basic visual guide that serves as a flexible framework of a new website and the relationships between its individual pages.  Wireframes can be as simple as paper sketches or they can be more complex and appear as coded HTML prototypes. There have been many different approaches to wireframing that have popped up over the last few years, and since the method is popular and seems to be here to stay, this article will look at how the technique may evolve over the next few years.

Functional to visual and beyond

Wireframes are characterized by functionality, but initially they were only functional and without images. In recent years that functionality has been infused with a visual element—as designers realized that lists of functional elements describing how a website would be built were long, difficult to conceptualize, and above all boring, they began to make wireframes a more visual experience, with the functional aspect playing second fiddle.  Now, wireframes are usually sketches of the website, with the functional elements blended into the image.  These days, most web designers use coded HTML wireframes to produce visual prototypes of their websites.  They may code the HTML themselves or use visualization or wireframing software that does the job for them.  Either way, this evolution of wireframes from solely functional to visual with a side of functional has been a success because it has made usability testing easier, supplying designers with valuable user experience feedback and creating a development process characterized by expedience.  In the future, software programs dedicated solely to wireframing HTML services will likely be the way to go because of their convenience.  HTML coding is not necessarily an easy skill to learn, and if there is a software program that can do the work for the designer, the entire development process is better facilitated.  Programs like Pidoco and iRise provide these services, and in the future there will undoubtedly be many more, leading to higher competition and a boost in creativity and innovation.

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

Leaked User Interface Design Screenshots of New Windows Tablet

Posted on April 14, 2011 by admin

What is Microsoft’s tablet user interface design strategy?

With all the hoopla surrounding tablets and the “Post-PC revolution” it is odd to see Microsoft, the original harbinger and herald of tablet-PCs, seemingly without a plan or clue. Up to now Microsoft’s tablet strategy has been to cram the desktop version of Windows to touchscreen interfaces. However the user interface design of Windows was designed to be used with a mouse and by extension a stylus whereas leading mobile OSes are optimized for fingers. Microsoft seems to be stuck to old paradigms even as their market share has eroded like limestone in the face of rapids!

Windows Phone 7 and Microsoft’s tablet user interface design strategy

The release of Windows Phone 7 (WP7) showed that if push comes to shove Microsoft is ready to create user interface designs that are innovative and fun to use. When reviewing the user interface design of WP7 I remember feeling that the OS would even be more of a hit on a tablet. The tiled user interface design is slick but with a larger screen it would be even more of a joy to use with the extra screen space. Up to now Microsoft has not announced what its tablet strategy is going to be but some screenshots have leaked, purportedly of the Windows 8 tablet user interface design.
According to the rumor-mill Windows 8 is shaping up to have a User Interface design that is ideal for both tablets and desktops. This seems to suggest Microsoft’s tablet strategy remains largely unchanged with tablets and desktops being grouped together. This is in contrast to, say, Apple’s strategy of grouping phones and tablets together with their iOS user interface design. In effect Apple’s tablet strategy is an iPhone with more screen space to expand and do more whereas Microsoft seem to be trying to squeeze the desktop OS into a smaller screen. Indications point to both embracing a future where the desktop and mobile OSes are more related and intertwined.

What do the leaked screenshots say about Microsoft’s tablet user interface design strategy?

The leaked screenshots indicate that Microsoft’s tablet user interface design is indeed heavily based on the tiled user interface design on WP7. Dubbed “Immersive” the user interface design (of the browser in action) shown in the leaked screenshots shows that Microsoft is ready to battle it out with iOS, Android, and webOS. The question is how long will it take till tablets ship with the new user interface design? By the look of things Microsoft will have to square off with iPad 3 and a 2nd iteration of Android’s tablet user interface design. As presidential elections prove, incumbency presents are even more of a challenge to would-be challengers. The longer Microsoft waits the harder it becomes to take a chunk of the tablet pie.

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

User interface design tips

Posted on April 2, 2011 by admin

Below are a few important tips to keep in mind when creating an interface design:

Consistency: When embarking on the creation of a new interface design, begin by thinking about consistency. Why is consistency important? Because people need to learn how to use a system, and once they have found out how it functions, they develop habits and expectations. Satisfying these expectations makes it easier for people to use an interface and to be comfortable while doing so. So, consistency makes people feel comfortable. For example, if you have buttons, put them in all the same places with the same fonts and terms on all pages of your interface design. This is consistent, it is easy, and it adds to a great user experience. This will likely increase the popularity and success of your interface design.

Don’t be busy, be simple: Crowded user interfaces can frustrate users. They are often difficult to understand quickly, which makes them difficult or time-consuming to use because identifying or discerning information and filtering out your options as a user becomes harder. Don’t fill your interface design with unnecessary graphics and exotic font styles. Find a way to make your interface design clean, simple, but also interesting.

Prototype and then test your interface design’s usability:

Prototypes (for example wireframe prototypes) and usability tests are a critical aspect of successful interface design. Prototypes are rudimentary working models of your interface design (or of any type of design for that matter). They range from simple wireframe prototypes consisting of placeholder boxes to detailed high-fidelity prototypes. Usability test are designed to evaluate your interface design by testing design concepts with end users, giving you direct input about how users use your system and how well they can understand it. During the creative process, you should keep in mind what objectives the end users of the application want to achieve. Consequently you should be prototyping and thinking about or rather measuring how your users will react to your interface design. Conducting a usability test is one of the only ways in which you can ascertain this important information. There are various methods of conducting usability tests which we will not discuss here, but one example of how to conduct a usability test is to use software that allows you to create wireframe prototypes of your interface design and then usability test them via the web. Pidoco has such a program, offering wireframing, low fidelity prototyping and remote usability testing capacity. This means that you can test potential users from the comfort of their own home or work environment. Pidoco wireframe prototypes also enable you to work out the relationship between the pages in your interface design, as well as the feature, and basic design layout. If you are designing a user interface, the benefits of prototyping, usability tests, and real-time collaboration are worth checking into, as is pidoco.com.

In conclusion…

The more you learn about interfaces, the more you realize how deeply they permeate nearly every aspect of not just human life, but also all forms of biological life and inanimate objects. The communication and connection between two autonomous points is what makes processes in the world possible. One of the foundation stones of computer science, and more narrowly website design, is understanding how great interface design functions and why it is so important. If you want to be a successful web designer, you must make usable, functional interface designs at the crux of your work. This will contribute to the success of not only your company (or whatever entity you design for), but also yourself. A popular interface design is something you can take pride in and will get you future contracts.

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

User Interface Design Terms explained: Memorability and its effect on Usability

Posted on April 1, 2011 by admin

What is memorability?

Within the context of usability and interface design, memorability refers to the user’s ability to leave a program and then remember how to use it whenever he chooses to return to it. It is very common for people to use systems once or even many times only to completely forget how to use them later, whether the time gap is days, months, or years (hint: think of your tax statement software). Thus, improving memorability of an interface design is a good way to address the problem of forgetting how to use systems and the time that is wasted re-learning them.

Why is memorability important in the context of user interface design?

Memorability is ultimately important because users tend to forget how to use applications (i.e. navigate their user interfaces) when they do not use them all the time (e.g.only once a month), even more so when they use multiple different systems. Since each user interface design takes some time to get used to and operate productively, each time a user has forgotten how to operate the user interface, time is wasted or errors occur. Worst of all, if users aren’t consistently using your program and can’t remember how to use it when they return, they may decide to stop using the system altogether. This is why memorability matters.

There are many reasons why users use software inconsistently, but the point is you want the system you create to be easy to learn and remember. Thus, memorability is also tied closely to the concept of learnability, and what we know from both of these concepts is that learning and memory function best when the basics of the system are intuitive. This means that users learn and remember an interface design based on gut reactions of how to use the tools given to them. Intuitive systems can be difficult to create because all users perform tasks on interface designs with different levels of experience and understanding. Thus, what is intuitive for a tech geek is not usually intuitive for a beginner. Systems need to be designed to keep the basics intuitive with room for more complex operations to be performed as users become more experienced.

What factors make an interface design more memorable?

According to TNL.net, the things that make a user user interface design intuitive and memorable for users are usually due to two factors:

  1. System feedback: When a user performs an action on a user interface he often receives a reaction that he did not expect. If the reaction elicited a positive emotional response then the user will remember how it was performed and what result occurred. Conversely, an action that elicits a negative emotional response will also allow the user to remember how the action was performed and what occurred. The point is, both reactions make the feature more memorable because we tend to remember our emotional response to unexpected reactions. Of course, you might try to ensure that there will be a positive emotional response.
  2. Visual Cues: Icons, symbols and other visual cues allow the user to make related associations with the task at hand. For example, when a user sees the „Home“ icon that looks like a small house users are able to make the association, intuitively, that this icon will take them to the homepage. Visual cues that are logical and familiar to users allow them to make logical and familiar associations that make the user interface more memorable.

Testing user interface designs for memorability

User input is needed in order to assess whether or not an interface design is memorable. An effective way to obtain user input on the memorability is to usability test your interface design. A good method for testing memorability is to assess how users use and remember your interface design by sitting them down in front of it and having them run through it. You should do this in several sessions. It is important that you use more than one user, as all users do not remember system tasks in the same way. You should do several rounds of testing, spacing the “run-throughs” by minutes, hours, and maybe even a few days. Make sure you pay attention to your users’ unexpected reactions as well as their intuitive reactions to the visual cues. Interview and record your users’ feedback about the memorability of the interface design or have them fill out a survey—it is up to you how you concretely collect the data. After you have obtained your initial results, you can make the initial necessary changes to your system’s coding (or even better a wireframe prototype) and then repeat the aforementioned process by conducting several more sessions so that you can garner enough information to evolve a system characterized by optimal memorability.

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

Usability Methods in Interface Design: Wizard of Oz and Digital Prototyping

Posted on March 31, 2011 by admin

Wizard of Oz prototyping is a usability method where a user interacts with a non working interface prototype being controlled by a ‘wizard’ sitting in a back room (like the ‘Mechanical Turk’). The wizard observes and reacts on the user’s actions and simulates the system’s responses to the user’s actions.

Wizard of Oz prototyping is usually conducted when you do not have a working prototype or where the findings from the Wizard of Oz prototyping test are basis for designing the system itself (e.g. syntax for voice controls).

On the other hand, digital prototyping is the technically advanced version of Wizard of Oz prototyping, where many of the reactions from the user’s behavior are executed by the prototype itself. Meaning: you already have a digital (interface) prototype which – to the user – seems to work like the finished website/interface, but instead just delivering screen content without any logic in the backend.

When to use Wizard of Oz prototyping?

Wizard of Oz prototyping should be applied when you need to find out specific user behavior to develop the device you are testing itself. Sounds contradictory? Okay, here’s an example: When you want to develop a voice control module for an application, you need the syntax people use to interact with the device. Faced with that problem, you can hardly build a functioning prototype to find out how people use your application. You will need the data itself before writing your algorithms.

When faced only with cursor interactions (and form field input) in an interface, you can apply digital prototyping to get the wanted findings. Create a clickable wireframes that simulates the interaction processes – but without any logic in the background. Now the user can click through the prototype and you can track and observe user behavior.

Where Wizard of Oz prototyping and digital prototyping are connected is, when you find issues where all test users stumble in your digital prototype, you can instantly (at least with some wireframing software solutions) change the prototype to meet user behavior and improve usability on the fly.

How is Wizard of Oz prototyping conducted?

Having a non functioning interface prototype, the wizard needs to see what the user does, since he has to react on user behavior and deliver appropriate output. Therefore the wizard will typically watch video feeds pointing to the test users hands and screen. Now observing an action, the wizard can now simulate the effects of the observed interactions.

To enhance the reality of the test situation, the test users are most often unaware (until after the test session) that they were interacting with a Mechanical Turk.

This, of course, requires a quick reaction and a lot of knowledge about the system on side of the wizard. He hast to quickly and accurately figure out the user’s input and deliver the relevant results in real time.

What you get from Wizard of Oz and digital prototyping?

As seen both usability testing methods have their unique range of use, whereas digital prototyping will probably be preferred, since it does not require an advanced technical setup or observation technology – and no human wizard playing the machine’s brain in some back room.

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

Usability Methods Explained: User Observation

Posted on March 30, 2011 by admin

This article will introduce the concept of User Observation pertaining to graphical user interface design answering the following questions: What is User Observation? What things should you consider when planning and undertaking User Observations? What are the benefits and applications of undertaking User Observation?

What is User Observation?

User Observation is a usability method used to document implicit user feedback to optimize a user interface design and learn from participants who undergo a Usability Test. Preferably, it should be performed as early and as often as possible starting with prototyping wireframes long before coding begins. It can be in the form of direct User Observation with the observer present in the room taking notes throughout the process in order to maximize its effectiveness. Indirect User Observation, which utilizes technology, such as audio or video recording equipment and digital prototypes or wireframes. Both direct and indirect User Observation have their advantages. Direct User Observation allows the observer to view users’ behavior up close and to pay more attention to key areas of interest. Indirect User Observation allows for nuances to be recorded and remarked upon which might have been missed during direct user observation. Pidoco, a Berlin based software producer, even offers a remote usability testing software that combines the advantages of both direct and indirect methods through real-time user observation from a remote computer. The software allows the observation of users anywhere on the globe while they click through a software prototype without requiring any software installation.

Things to consider when planning User Observation?

When planning to undertake User Observation one must establish the scope of this process. What knowledge do your clients require from the study? How can you tailor the study to achieve these aims? Wireframe tools that allow for Rapid Paper Prototyping are key in preparing your study. For a more thorough observation one can combine direct and indirect observation by being present in the room with the user while recording him or her. However this also presents another challenge for the increased data will take more time to analyze thus driving up costs. Not to mention the high costs of inviting and hosting users or renting specialized equipment and facilities, remote testing options such as Pidoco can reduce this cost and allow for higher scalability. Running a pilot observation session is a good way to determining the length and adequacy of the session. Other things to consider in the planning process include scheduling time, place and establishing who will be observed.

Undertaking User Observation

The process of user observations can be obtrusive to participants so one has to be mindful of the interpersonal dimension and strive to create a stress free environment. The very act of being observed can lead to users altering their behavior thus skewing the tests’ results. A powerful solution is cost effective online wireframe creation and prototyping tools that allow easy remote usability testing are useful in capturing user’s reactions in their natural environment. This also has the added benefit of sustainability as users’ carbon footprints are reduced to a minimum. After completing observations, writing down first impressions is key before moving on to the analysis stage. Remember to measure both the performance (e.g. success rate, time taken, difficulties etc…) and subjective (reported satisfaction, easy of use etc…) reactions of user’s as they may not necessarily correlate.

Benefits and Applications of User Observation?

The qualitative data obtained from user observation is useful in enhancing user experience and when employing user centered design. Using wireframe software the results of the observation help iron out any usability issues early on in the development process as one refines user requirements allowing for less expensive fixes than those that might be necessary later on in the software development process.

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

Accesibility matters: Microsoft Dynamics CRM 2011

Posted on March 28, 2011 by admin

Several weeks ago Microsoft released an online version of its Dynamics CRM 2011 in an effort to make the software more readily available and easier to use for its customers. This is just one more example of established applications going “cloud”, i.e. becoming available as on-demand web-based solutions, just as we have seen an enormous rise of software-as-a-service offerings and new business models popping up in the software space. The Microsoft Dynamics CRM program is a multi-lingual Customer Relationship Management suite that helps business professionals facilitate the relationships they have with their customers or that their customers have between each other in order to meet their many and varying demands.

Microsoft hasn’t made many changes to the software itself, but this new cloud version is more about accessibility, which in its own right improves the usability of the program since it makes it universally accessible to users from a broader range of backgrounds. According to Dynamics General Manager Brad Wilson, “this type of technology lets smaller business take advantage of technology that was before only available to larger organizations…to be able to offer it up as an on-demand service at a very affordable price really expands the access of the technology to smaller companies, and I think that’s very exciting.” Therefore, this new cloud version of Dynamics sells itself as friendly to small businesses, a type of tool that can give them a competitive edge among the giants.  This is a very lucrative claim in an era that, despite economic hardships, is still characterized by entrepreneurial ventures.

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