Category — GUI Prototyping Tool

Good user interface design ensures that visitors to your website do not leave it shortly after coming. How user friendly a website is usually determines its success. It is hard to imagine that a website with clumsy and complicated user interface design keeps its visitors for long. This is why usability should be the number one consideration during the entire development process, beginning with user interface prototyping. In this blog post I would like to point out the three most common usability flaws to consider during user interface prototyping.

Unclear or complex navigation is your first enemy. When a user comes to your website he has a particular purpose: find your phone number or buy a pair of sneakers. User interface prototyping is the right stage to consider how clear your navigation is. Are you using obvious labels? Is information broken into logical categories? These days many designers are obsessed with innovative navigation design concepts. It is advisable to get those tested during the user interface prototyping stage to avoid rework in the future.

Something that truly annoys me in many websites are horizontal scroll bars. You don’t have to be a usability expert or do any user interface prototyping to know it is a bad idea. Nevertheless, user interface prototyping would show you that mine is not an unusual opinion. Most importantly, many users do not bother to scroll so the information never reaches them. User interface prototyping can help you plan the amount of content that will be available on the website. Remember that in many cases less is better than more.

Lastly, I have to mention small or invisible click areas. If a user can’t instantly get where he wants to go he will probably not keep trying for very long. It is a rule in user interface design to make click areas prominent. They should be noticeable and they should be of an appropriate size for a user to click on them with his mouse on the first try. User interface prototyping and subsequent prototype testing can help you determine the right size of your user interface elements. Something else you might consider is that many users now browse the web on their mobile devices. Would the size of your links and buttons be appropriate for their screens?

Use common sense and bear these thoughts in mind during user interface prototyping.

Wireframe software has gone a long way towards becoming the applications that web-developers and web-designers are using today. I recently encountered an article written by Julie Stanford in the beginning of 2003 on Boxes and Arrows on the benefits of using HTML for wireframing, and I wondered how the evolution of wireframe software happened.

Naturally, the first known wireframe tool was pen and paper. This one existed since the beginning of web-development. By the way, the first website to ever be published is said to have been developed at a CERN facility in Switzerland in 1991. Pen and paper were surely used then, and it still is a handy wireframing tool because it is quick and available to anyone. Have some ideas and no computer at hand? Just pick up a pen and jot them down. But paper prototyping, of course, also has its limitations as a wireframing tool that are partly solved by more modern wireframe software.

The beginning of 2000 knew two main types of wireframe software, which Julie Stanford describes in her article. Those were HTML-based and graphical tools. HTML wireframe software allowed web-developers to put together a few lines of code, and get a very simplified version of the website, which, nevertheless, would allow users to see its functionality because it produced web-pages with working links between them. Apart from links, these pages would not have very much in common with the future website.

Graphical wireframe software would have a closer visual resemblance with the future website’s layout, but those wireframing tools had no capacity to show how the website would interact with the user. Interactive elements like, for instance, a drop-down menu, could only be represented by a still image. In many cases, Photoshop or similar image-processing applications were used.

Today, thankfully, there is a lot more diversity than this. One of the first specialized wireframe software applications was released in 2003 and a variety of other tools followed, becoming more and more progressive every year. The latest wireframe software, first desktop and later web-based, is meant specifically for creating website wireframes with the least effort and time involved and allows web-developers not only to design great user interfaces but also to test those user interface prototypes through usability tests.

Inspired by a uxmovement blog post

The traditional user interface design convention of completing forms is by clicking a “Submit” button. The use of the word submit is a logical one because it describes what the system does when a user fills in a form. I find this type of terminology to have been more pertinent the further back in time one goes. In the past, particularly before the advent of graphical user interface designs, the average computer user tended to be engineers or technophiles. For such a person the vagueness of the word submit would not be that great. Today, however, computer users represent virtually all strata of mankind. The most successful computing products, websites, and applications today accordingly adopt a user-centered user interface design approach. iPhone, Amazon, Facebook, and Spotify (the music streaming tool) are all testament to this, with all of them great user interface design and usability.

The main problem with the wording of “submit” is that it is not user-centered enough. Sure users do submit their completed forms but they do so in the context of a specific task. Having the call-to-action affirm the current task in its user interface design lives up to Steve Krug’s first law of usability thus focusing on completing tasks. Examples of task specific labeling that can be applied to submit buttons include Create Account, Send Message, Subscribe Now, and Register Free. Furthermore implementing these types of buttons into a user interface design is an easy inexpensive process as all it takes is changing a little bit of text. iOS does something similar with the Enter button on the virtual keyboard. When typing in a password for a WiFi connection the word changes to Join and to Search when using a search bar.

This blog post is the first in a series of two about Affinity Diagrams as a usability and interface design method

What is an Affinity Diagram?

The Affinity Diagram is a tool used within project management and other fields such as interface design (for example before creating wireframe prototypes) to sort large amounts of ideas into groups for review and analysis. The affinity diagram methodology was created in the 1960s by Jiro Kawakita and is thus also dubbed the KJ Method. Originally, Affinity Diagrams were intended to help in diagnosing complicated problems through the organization of qualitative data to reveal themes associated with the problems. Affinity Diagramming is related to other user interface design methods like card sorting which also use ideas that are written on cards (or post-it-notes etc.).

What benefits do Affinity Diagrams offer during interface design and wireframing?

Affinity Diagrams can greatly aid interface designers during the conception stages of a project when wireframing and prototype creation are typically used to generate interface design solutions. Affinity Diagrams can help identify what to include into a wireframe prototype by consolidating lots of customer data into meaningful design criteria. The methodology, in effect, can uncover the range of, give boundaries to and uncover similarity among user’s problems and needs. But Affinity Diagrams can also help identify potential areas for future study. Affinity diagramming is advantageous because it facilitates teamwork and collaboration and consequently improves the cohesion of a team. Because the method is straightforward and simple it is also cost-effective. Affinity diagrams can also help identify customer work practices and can therefore be considered a precursor to Contextual Design, another interface design method.

What are drawbacks of Affinity Diagrams and how can this affect wireframing and interface design?

Affinity Diagrams are considered cost-effective but the method can be time-consuming, especially when there are copious amounts of data to be analyzed which can prove to be exhausting for your team as they evaluate all of the data. These drawbacks are due to the time and effort it takes to extract data (which could, and often does, come from a number of sources) and consolidate them into meaningful ‘units of information’. Time is consumed both in completing the affinity diagram project and the subsequent interpretation of the resulting groups and sub-groups. Another problematic situation can arise when there is simply not enough data. As a rule of thumb, if 15 or less items of information have been identified then you may forego the Affinity diagramming process and resort to other user interface design methods.

This blog post is the first in a series of two about contextual design as a usability method

What is Contextual Design?

Contextual Design is a User-Centered Design process that was developed by Hugh Beyer and Karen Holzblatt. It gathers information for the purposes of understanding how users work in order to create user interface designs (or other products) that adequately support users and assist them with accomplishing their goals. According to Beyer and Holzblatt, Contextual Design “uses extensive field data as the foundation for understanding user’s and business’ needs”. It incorporates ethnographic methods for gathering data relevant to the product, field studies, rationalizing workflows, system and human-computer interface designs. The ultimate goal behind Contextual Design could be described as producing user interface designs that are usable for a specific group of target users, a critical factor in achieving product success.

Contextual Design is important to interface design

Just like with many other products and services, contextual design is vitally important to user interface design. Successful UI (user interface) designs are the ones that help users accomplish tasks as easily and quickly as possible, and that requires some work on the UI designer’s part. Contextual design is all about knowing which functions and features and design characteristics are needed to accomplish that. It gives designers the ability to comprehend the context in which users employ a specific user interface.   Taking the time out to conduct research and identify with user contexts is intended to give user interface designers the knowledge required which they can then fashion into wireframes on the road to creating great user interface designs.

Welcome to my two-part blog on Ethnography and the role it plays in usability engineering and user interface design.

What is Ethnography?

Ethnography is an approach to research that involves in-depth study of population groups through participant observation, interviews, questionnaires, and artifact analysis in an attempt to gain a thorough understanding from a number of perspectives. This research methodology is usually associated with the social sciences, in particular anthropology and sociology. Ethnography also takes place in the natural context of the subject being observed and, as such, the term is often interchangeable with phrases such as “field study” and “case report”. Traditional ethnography focuses on long-term studies spanning weeks, months, or even years. This is in order to understand, first-hand, fundamental answers in regard to the subject(s). Where do they live? How do they make a living? What do they eat? What are their linguistic, housing and marriage customs etc?

What does ethnography mean in the context of user interface design?

In the context of user interface design, ethnography is a valuable source of data for personas, scenarios of use, task analysis, requirements elicitation, and storyboards. Sometimes in life the laboratory setting can obfuscate data due to the very act of observation affecting the subject. Ethnography seeks to paint observations in their proper naturally occurring context, i.e. the point at which they would be using a software application and navigating its interface design in the course of their everyday life.

Ethnography as a usability method

Ethnography lends itself well to usability testing of user interface designs due to the principle of holistic human data collection. This works well in tandem with the fundamentals of user experience in user interface design. Ethnography brings with it a number of merits to usability testing. In comparison to observations conducted in the lab the authenticity of ethnographic reports is higher. Behavior observations are best understood within their natural environment and ethnography allows for this. As a usability method ethnography provides a much more comprehensive perspective of the users and their environment than other forms of research. Another advantage is that it employs a theoretical framework for contextualizing data.

When to use ethnography as a usability technique

According to usability expert James Horn, the use of ethnography as a usability method is “best used in the early stages of development, when you need to know more about the issues surrounding the use of a product rather than actual metrics.” In the very early stages of user interface design, using the ethnographic method will help you collect user requirements based on how users operate within their “native” environments, which is how they operate in the real world.  Obtaining these user requirements will then allow you to incorporate your findings into preliminary designs of a user interface. Of course, it is important to watch out for observer bias, as Information and results are highly dependent on the researcher’s observations and interpretations.

In this 2 part blog I shall look at the role gender plays in Human Computer Interaction (HCI). What is Gender HCI, after all? Does empirical data show significant differences between male and female end-users?

What is Gender HCI and what does it have to do with user interface design?

Gender HCI is a subcategory of Human Computer Interaction (HCI). HCI is concerned with the design and evaluation of interactive systems used by humans, such as user interface design. Gender HCI, a relatively new field that is still in its formative stages, shifts the focus to the differences between men and women and the role that plays in how they interact with interface designs. The term Gender HCI was coined in 2004 by Laura Beckwith, an Oregon State University PhD candidate, and her adviser Margaret Burnett. Relevant research reports that dealt with the gender aspects of user interaction date back all the way to 1987, namely Chuck Huff’s research on how games designed as “gender neutral” look like games designed for boys.

Gender HCI, like regular HCI, is a highly interdisciplinary field because it requires that designers and researchers from various fields collaborate to understand the ways in which males and females solve problems, communicate, and process information.  Researchers and designers must explore diverse areas such as psychology, computer science, marketing, neuroscience, education, economics and others to ascertain the information needed to research requirements and design successful user interfaces with potential Gender specifics in mind. Since it became clear that Gender HCI’s is a viable category of HCI, research and interest in the field has exploded. Today many computer scientists and designers are occupying themselves with system models based on gender differences.

Topics explored in Gender HCI: Why is it important for user interface design?

Gender HCI is not simply about adding pink to an interface design optimized for girls and, conversely, blue for boys. Examples taken from the available empirical data have shown that Gender HCI applies to many situations. An example of this is in spreadsheet problem-solving tasks where it was found that female end users were significantly slower to try out advanced software features. It has also been found that with smaller displays, males’ performance was significantly better than female’s. Larger displays improved the performance of females while the performance of males was not negatively affected.

This blog post is the first in a series of two about Human Computer Interaction (HCI)

What is Human Computer Interaction (HCI)?

Human-Computer Interaction (HCI) is an interdisciplinary area of study that concerns itself with the point of intersection where people come into contact with computers, namely user interface designs. It also encompasses computer science, behavioral sciences, interface design and other fields of study. Although Human-Computer Interaction also refers to many products with traditional electronic displays and/or physical controls such as microwave ovens or aircraft (here, often the term Human Machine Interaction or HMI is also used), for our purposes let’s look at it from the point of view of computers, software and their user interfaces.

Human-Computer Interaction, Interface Design and Usability

The main goals of Human-Computer Interaction and interface design are to maximize usability and user satisfaction. A poor human-machine interface design, such as using non-standard interface design layout, can lead to a number of unexpected and annoying problems. Improving the interactions between users and computers and meeting the user’s needs regarding the interface design are important when creating successful systems. The design activities relating to Human-Computer Interaction significantly impact how successful systems are in terms of user acceptance, in terms of how productively the system can be used to accomplish critical tasks, and to how popular systems are with users and what market penetration they can reach. Often, the aspects relating to efficiency of use are summarized as usability.

This blog post is the first in a series of two about accessibility design as a usability method

What is accessibility and why is it important?

In general, accessibility describes the degree to which a product, device, service, or environment is easy and straightforward to use by as many people as possible.  In addition, accessibility concerns itself with the benefits of the entity being accessed: How does easy use of a product benefit the user and the creator?

Accessibility results from proper design of products and services. Take public transportation for example.  Public transportation is designed to optimize the routes which users (by bus, tram, or train etc.) must take to get to their given destinations.  Public transportation provides users with maps, internet sites that help them plan their routes, elevators and wheel chair lifts for the disabled, and many other features that make it easy and beneficial for people to use.  When public transportation is easily accessible, the benefit is that the users have efficient, cost-effective means of travelling and the creators are able to earn money and sustain the transport system.

Computer science, accessibility design and user interface design

In computer science, accessibility design means creating websites or software that is easily usable and available to people of all abilities.  This means that each interface design should grant users equal access to the functionality of and the information contained within the site. In computer science, accessibility design concerns itself mainly with the construction of interface designs that are accessible to the disabled. For example, how can a designer code the HTML to provide or enable text-to-speech software for the deaf or text-to-Braille hardware for the blind?  The concept behind accessibility design is clear: Disabilities should not hinder users from accessing and using a given software or website due to shortcomings of its user interface design.

What is learnability?

According to the UsabilityFirst glossary, learnability is a measure of the degree to which a user interface design can be learned quickly and effectively. Learning time is the typical measure. User interface designs are usually easier to learn when they are familiar and designed to be easy to use based on core psychological properties. The learnability of an interface design can be, in turn, further broken down into five similar but distinct components: the aforementioned Familiarity, Consistency, Generalizability, Predictability, and Simplicity. When developing usability tests, it is important to keep the learnability of your user interface design in mind because a website or app that is easy to use will likely be used more often and more productively.

The five components of learnability

As mentioned above, there are five distinct components that comprise learnability.   It is essential to understand these constituents because they contribute to a user’s overall ability to learn a given interface design:

1.   Familiarity: Familiarity comes into play because users tend to expect certain things to happen.  This can include certain layout conventions, such as navigation schemes, color schemes or responses of an application.
2.    Consistency: Applications with a consistent interface design are easier to learn. This is especially important across various different parts of a software application, where changes of the interface design may confuse users or require them to adapt to yet another pattern.
3.    Generalizability: Generalizability means looking at other software applications that are similar to yours. The expectation of users is that tools which serve similar purposes include similar functions and respond to similar priciples. As users use many applications, generalizability helps them learn to operate an application without having to understand entirely new interface design concepts each time they encounter a new product.
4.    Predictability: Predictability means whatever tool you are developing, users of similar tools should be able to navigate your interface design with only the knowledge of using a similar tool in the past. That is to say that meeting user’s expectations improves learnability.
5.    Simplicity: Learning is fastest when there isn’t much to learn. Simplicity means keeping your interface design as lean and clean as possible for optimum learnability. Minimizing the amount of learning required by limiting the interface design’s complexity, improves learnability.