Category — Website Wireframe Software

The process of interface prototyping, particularly user interface prototyping is important, especially in building complex websites. Using an interface prototype allows you to analyze the functionality and usability of your website before the lengthy and costly programming stage. The most important aspect of user interface prototyping is the ability to analyze usability and collaborate according to the needs of the person or organization running the website. There are four key stages to user interface prototyping, which will be explored in this blog.

Stage One – Assess requirements

In this stage, the website implementer establishes the requirements for a website interface prototype. User interface prototyping begins with the client’s needs and it is vital that collaboration is prominent throughout the interface prototyping process. Here it’s useful to look at the requirements a client might stipulate in the initial design stage, such as input fields, links to other pages and the use of visual media. Once these requirements have been established, the design process begins.

Stage Two – Prototype interfaces

In the design process, the user interface prototype is developed. The designer sticks to the brief that has been made by the website implementer and builds the initial prototype. This initial user interface prototype is then sent back to the client.

Stage Three – Test prototypes

Once the client has looked at the initial user interface prototype, it is likely that suggestions for changes will come about. At this stage it is useful if the prototype software enables real-time collaboration, so that the client and designer can communicate changes to one another quickly and effectively. Here the end user can also play an important role, especially if the prototype design software enables remote usability testing. This type of software enables you to see what problems end users may encounter and resolve them quickly and easily.

Stage Four – Adapt interface prototypes

The final stage involves components of the previous three process stages. The prototype is reviewed and revised until the client is satisfied that all the requirements have been met and there has been positive usability feedback from end users.

What are the benefits of interface prototyping?

There are many benefits to using interface prototyping. Not only does this allow for collaboration between the designer and implementer of the website, there is also the possibility to test the interface prototype on end users. That means not only is there the possibility to change design proposals early on, but end user problems can also be anticipated and resolved quickly. The main advantage of user interface prototyping is the speed in which the prototyping process happens, which in turn can save your company money.

This is the first part of my two-part blog post on persuasive design vis-a-vis user interface design.

What are Some of the Underlying Principles of Persuasive User Interface Design?

When incorporating persuasive design into a user interface design strategy it is important to keep a few underlying principles in mind, the first of which I briefly alluded to in the first part of this blog post:

• The first underlying principle is how the motivation and ability of a user determines whether or not they perform a specific task.
• The second underlying principle of persuasive user interface design is that user behavior can be classified in terms of duration and as either negative or positive.
• Using the behavioral sciences a user interface designer can derive insights used to augment the motivation or ability a user has when interacting with a UI design.
• Triggers (also called Call-to-Actions) are single user interface design elements that are added to a UI design to specifically increase the motivation and/ or ability of a user.
• The fifth underlying principle of persuasive user interface design is timing. Triggers have to be presented not only the right place in the UI design but also at the right time. Or in other words when a users motivation will have peaked, such as after putting items in a shopping cart a buy button would be ideal at this point in time.

What are Some Examples of Persuasive Design in User Interface Design?

An example of persuasive user interface design is how DropBox features triggers that call users to recommend the service to others and thus receive extra free storage. Other web apps such as Foursquare are taking gamification to heart by rewarding users points and more to use the service. Health and fitness apps, such as Nike+, are also including persuasive design to help keep users fitter. Persuasive user interface design is great when used to boost positive behavior. Conversely speaking persuasive user interface design can also be used to encourage negative behavior that can affect a user’s health, happiness or money.

Ubuntu, a free and open Linux-based computer operating system, released their newest version to the developer, designer and user community on 10/10/10, appropriately dubbed the 10.10 Maverick Meerkat.  Ubuntu developer Mark Shuttleworth describes meerkats as “light, fast, and social” and this latest rendering of Ubuntu is meant to mirror that sentiment with a sharper and quicker user interface design, dubbed Unity, which is consistent with Ubuntu’s overall interest in ensuring usability, stability, and security for its various users across the globe.  Some additional 10.10 updates include:

•    Major updates to open-source operating system, i.e. multitouch support
•    New functionality for personal-cloud services, known as Ubuntu One
•    Increased availability of support for cloud apps, set to drive web 2.0 apps
•    New default font suitable to improve usability
•    New photo manager:  Shotwell replaces F-Shot
•    Microblogging client Gibber updated to support Twitter’s change to OAuth user authentication

Ubuntu 10.10 has strengthened its cloud services and widened its variety of apps.  It is continuing to evolve into a viable competitor for Apple; indeed, there has been a trend of Apple users switching to Ubuntu for PC, giving up the familiar Apple UI design features in favour of the openness of the Ubuntu world.  So far, version 10.10 has been met with positive reviews not only from general users, but also from developers and designers developing software applications for the Ubuntu environment. And since Ubuntu releases new versions of its operating system almost every six months, the tech world will be waiting to see where it goes next.

Unlike a GUI, which users can read and work through at their own pace and on their own time frame, a VUI is completely time sensitive for the user.  The VUI requires that users listen to every word coming over the wire before they hear the one that follows it—they cannot simply skip back and forth between pages and tasks at their leisure.  The user is captive to the VUI’s design because he cannot perform his tasks at his own pace.  Understanding the differing roles of time and autonomy in VUI and GUI design can make or break a user interface design.  Therefore, it is important that VUI developers allow flexibility in their design in order to facilitate a more comfortable user experience:

•    Make all of your information communication as short and concise as possible—allow users to get to the gist of things right away.

•    Allow users to “barge in” or execute a task before the automated system has finished speaking.

•    Allow users to pause the VUI—this gives them a sense of control and an opportunity to collect their bearing if they are confused or unsure about a task.

•    Always provide the user with a repeat option.

•    Always make help available to the user at any time.

These are just a few tips that will help you navigate the challenges of user time and autonomy relative to your VUI.  Compared to VUIs, GUIs have the primary advantage of the user navigating a web page while simultaneously controlling the medium, the message, and the interaction itself. Of course a poorly designed GUI can frustrate a user beyond belief, but a poorly designed VUI can be even more disastrous because there is little that will prevent the user from simply abandoning the IVR interaction by hanging up the phone. Thus it is important for VUI designers to be exceptionally aware of the critical differences in time and autonomy as they relate to GUI and VUI design. Ignoring theses differences and approaching VUI design from a GUI mindset can prove fatal for the system if users find themselves imprisoned by unreasonable time constraints and a lack of independence.

In the “The Forrester Wave(TM): Online Testing, Q3 2010″  Adobe’s  Test&Target, its new online testing and optimization solution, was named a leader in online usability testing programs.  The report evaluated eight different online testing programs using the following criteria:

•    Management
•    Reporting and usability vendors’ current offerings
•    Support for a variety of testing techniques
•    Clear product strategy
•    Client satisfaction rankings

The report concerned itself with evaluating how “Online testing provides a mechanism for applying the principles of quantitative analysis to improve the Web site experience and drive metrics that affect the bottom line”.  Adobe was named a leader in this field because they scored high in the abovementioned categories.

While online analytics can go a long way in improving existing websites, the process can and should start much earlier. Prototype testing is an effective way of avoiding pitfalls as early as the initial concept phases of a web development project. Wireframes, mockups, or fully interactive prototypes can achieve remarkable user feedback through early usability tests. While the quantitative data gathered by online solutions like Adobe’s Test&Target can point towards usability issues, qualitative tests performed on prototypes can help find out the root causes of issues that users may have with specific parts of a user interface design.

If media plays a central role in your technological activities then take note: Finnish-based Dazzboard wants to offer you the opportunity to build a media bridge between your phone and PC. Dazzboard claims to be “the ultimate media webtop, providing users with seamless drag and drop connectivity for photos, music, videos between any device and service on the Internet” (dazzboard.com). Dazzboard enables users to convert media files from their cell phone or other mobile device to their computers. Music, photographs, videos, and other apps can be integrated on various digital user interfaces with Dazzboard as the bridge builder and the internet as the bricks and mortar.  However, there is a catch: Currently Dazzboard services are only accessible via Internet Explorer and Firefox and it is not compatible with any Apple products. So far it’s only supported by PCs, with support extending to Windows 7, Windows Mobile and Android smartphones.  Still, some avid PC users are even touting it as a better, more dynamic version of iTunes.

How the interface design change functions

So how exactly does this new panic button work? The panic button is actually an app called „ClickCEOP“. Users have to add the app to their Facebook interface and then a tab appears in the interface design, which contains a clickable button. The button allows the user to contact authorities when he feels a user is acting suspiciously or inappropriately.
While the panic button is no doubt a helpful feature and a strong indication that Facebook is taking the safety of its users much more seriously (or at least succumbing to user demands much more easily), its addition to the British Facebook user interface design shows that Facebook is willing to move its privacy features from a personal to a more public sphere. And this does not come without complications. For example, the Facebook security user interface has generally been very private. You as a user control who looks at your profile and what that person can see etc. It has been about you controlling your own information. While users have always been able to notify the Facebook powers that be of someone’s „bad behavior“ or had the power to block people, Facebook hasn’t before had such a direct interface with public authorities. There is definite potential for misuse with the introduction of the panic button – kids will be kids after all. Thus it will be interesting to see if there is a rise in reported suspicious activity on Facebook, and it will be even more interesting to see how authorities will respond to panic button clicks of different types. This trend shows that social networking is evolving and it points towards a more public understanding of online communities.

Internet usage and connectivity varies greatly around the world. In Germany, around 72% of all households have internet access. While this may seem high, especially when put into the context of developing countries, it still means nearly one third of all households lack internet access. One of the reasons for this could be age and the age-related habits or requirements of elderly people. In Germany, 60% of adults use the internet whereas 80% of 10-13 year olds use the internet. Statistics from the US reveal that overall 79% of adults use the internet, but on further inspection one can see that the number of 18-29 that use the internet, at 92%, is double the amount of those aged 65 and over, at 42%.

Another reason could be differences in income or social status. On a macro level, the countries with the highest number of computers per people and households with internet tend to be those with the highest GDP. Within those countries, households from a lower socioeconomic background tend to have less internet access. In Britain, this led to the then premier Gordon Brown to start an initiative to provide 270,000 economically disadvantaged families with laptops and free internet connection. China, with 298 million users, has the most internet users in the world, but considering its huge population that only means that 22.4% (below the world average) of their population are using the internet. Africa by contrast has an average internet penetration rate of 8.7%.
Could the reason a third of the population in countries like Germany do not use the internet be due to inadequate interface design and/or usability issues in general? While many popular websites have interface designs that are designed with the best usability principles in mind, they often focus on younger age groups – not only in content and functionality, but in important areas of interface design. These include small to medium font sizes or navigation elements that require good eye-sight, screen layouts that are unfamiliar to people used to print products, complex navigation schemes and a plethora of options to select, as well as terminology and language which often includes modern non-native terms like “Home”, “Account”, “Login”, and the like. All these elements of an interface design pose potential barriers to use by older people.

Aside from other reasons for the lack of 100% internet access at home – such as people not feeling the necessity perhaps having (free) internet access at work, school, wireless access at their favorite cafe, or even from their mobile phone – usability and interface design issues may help explain part of the large portion of the population that still doesn’t use the internet. This shows that in order to improve and facilitate internet use for certain groups in the population, such as the growing group of elderly people in developed nations, their special requirements in terms of usability and interface design will have to be catered to. This may well open new market opportunities, such as accessible internet and others. Yet, there needs to be more, perhaps even special arrangements by providers taking into consideration the needs relating to content and layout of interface designs with special settings or access options for certain population groups.

While internet access is a good indicator of internet use, statistics on this indicator do not tell the full story. Consider these facts: The mobile phone application market is expected to grow to $15 billion by 2013. In places like Africa the leapfrogging aspect of mobile phones means that it is easier and cheaper to access the web via a phone than to have internet access at home, leading to a large percentage of internet users not accounted for by internet access statistics. In addition, it is worth noting that internet use can never be 100% of the population considering that some people, like those in prisons, are often not allowed to use the internet.

Better co-operation can solve hardware and user interface design compatibility problems

As technology continues to evolve, hardware designers are packing more and more processing power into smaller devices.  The convenience factor of a small portable phone or laptop is clear, but are they now becoming so small that it is becoming progressively more difficult for users to interact with the actual interface? In the case of the iPhone 4G,  it is anticipated that the small and sleek design will force the interface design to adapt, i.e. force the controls to be packed closely together, potentially making it difficult for users with large hands or fingers.  This would obviously frustrate users and lower the iPhone’s overall usability. Perhaps it seems like a picky point (maybe not such a big deal in the grand scheme of things), but the bottom line is that interface designers need to be thinking about the constraints of the hardware that serves as vessel for their apps or websites.  Thus, there should be a clear line of communication between the interface and hardware design teams.   This can only help create smooth and streamlined interaction between the two mutually dependent parts – the hardware and the user interface.  Apple’s recent reported and anticipated iPhone 4G problems aren’t really all that horrible or astonishing—but they do provide fruit for thought and bring to light the importance of hardware and user interface design working together.

What are some things that smartphone OSes can learn from each other?

Any of the would-be challengers (here’s looking at you MeeGo, WebOS and Bada) wishing to gain a sizable chunk of the smartphone pie is going to have to try and emulate these aforementioned strengths in their respective OSes. The iPhone still remains the OS to beat proving that a great user interface design, solid usability and positive user experience will be a winner with consumers. While the bare-bones Android’s interface design is not the most pleasing (Motorola Droid/ Milestone users can attest to that) it can be tweaked as shown by HTC’s Sense User Interface design (which is based on the TouchFLO 3D user interface design) to enhance  user experience. The iPhone would also do good to pick up some of Android’s tricks such as allowing tethering effectively turning the phone into a WiFi modem. The iPhone also needs to improve cloud functionality to match Android as, for example, if you download apps for the iPhone on your desktop the only way to transfer them is through a pesky cable.