Category — website usability

Ted Pollari at the Illinois Institute of Technology (IIT) was (and is) working on a software that allows for easier analysis of qualitative data. The software, called “nineteen” analyzes .xlsx files and then visually displays patterns. What struck me was the comparison that he drew between qualitative analysis and prototyping (in the sense of paper prototyping) and it seems to me that the same principles that he attributed to making paper prototyping a good basis for this qualitative analysis software were also foundational concepts behind online prototyping software.

Prototyping and data analysis software

In the presentation on Videmeo.com, Pollari listed attributes for prototyping, which included, “externaliz[ing] cognition”, “thinking with your hands”, “produc[ing] alot of ideas”, “fast –iteration is the goal.” He also mentioned that “it doesn’t matter if one iteration yields little – it’s the process that matters.” Pollari then goes on to discuss how these prototyping attributes parallel the “nineteen” data analysis tool.

Prototyping software as a medium

From my experience with prototyping software and prototyping tools, online prototyping software is the same as paper prototyping except for the difference in medium. Online prototyping software helps a person “externalize cognition”, “think with [the] hands” (as well as the eyes), “produces a lot of ideas”, and also allows the iteration of ideas to be even faster than traditional pen and paper prototypes. So according to the benefits that Pollari listed for paper prototyping, online prototyping software is an excellent resource for prototyping – which is one reason why I use it.

Prototyping software in brief

If you already know that a prototype (within a computer context) is a representation of a computer program/application/website, then you will know that prototyping software is a computer program that aids you in creating drafts of programs, applications, or websites.  The prototypes that you make using prototyping software will help you visualize what the user interface of your app will look like and revision is easily done. These prototypes , of course, are not the actual final product and thus they will not possess the same functionality of the actual application, but some prototyping software will allow the prototype to be simulated with clickable wireframes to “test” it out.

Conclusion

It seems that the more I use prototyping software, the more I see its relevance, even in its theory, to other things, just as Pollari did when he drew the comparison between analyzing qualitative data and prototyping software. It seems that there is a lot to be said about prototyping and the prototyping process and it seems university students are delving into that. I will be interested to see what other theories about prototyping and the use of prototyping software arise in the future.

In this blog post I would like to address an interesting feature that some user interface design tools have, namely, the flowchart view. Flowchart is a diagram that shows a certain process or flow of information. Flowcharts are often used to structure data, create algorithms and map design processes. Why not create a flowchart of a website using interface design tools? How can you benefit from a user interface design tool that has a flowchart view?

Firstly, the flowchart view in user interface design tools allows designers to create a sequence of pages. For instance, when designing a purchase process for an e-commerce website a web designer might use the flowchart view to link one page to another in the necessary order. Certainly, linking pages to each other can be done in many user interface design tools, whether they have a flowchart view or not. The flowchart view, however, makes it possible to see all of the pages necessary for the process at the same time and link them to each other more easily while keeping a good overview.

Another benefit of the flowchart view in user interface design tools is that they show a process visually. It is easy to make mistakes or miss pages when linking is done manually. When all of the content is present on one page together with all the links and dependencies it is easy to spot when something is out of place. Another good point is that when the process changes (or if the connect or sequence should change for whatever reason) then user interface design tools with a flowchart view will allow you to make quick edits. You will not have to go through all of the pages in the process manually and correct the links.

These are the reasons why I feel the flowchart view is important to have in your user interface design tool. Do you use this feature and if so do you find it useful? If not, why not try out a new interface design tool to see?

Wireframing Software Overview

Wireframing software is used for website development, but have you ever wondered where the term wireframing software actually comes from?  Why is it “wireframing software” instead of, “spoke” software or “building blocks”? Your wireframe deer outside can probably help.

This short blog post will address a possible etymology of “wireframing software” (also wire-framing software) as an example of technological terms having their basis in the everyday world. We will first start with a dictionary definition of wireframing software then compare it’s function with a wireframe deer.

Wireframing Software in Dictionaries

To begin, we must break wireframing software into its individual words. Collins English Dictionary 10th Ed. (2009) defines Wireframe as “a visual representation of the structure of a web page” and Merriam-Websters dictionary does not even list the word. Neither dictionary yielded results for “wireframing software” or “wire-framing software”.  What is more interesting however is that the term “wireframe” is neglected, just like wireframing software, although it is perhaps key!

Wireframing Software and Your Wireframe Deer:

A “wire” is a bendable “string-like” metal and “to frame” is to put together the “skeletal structure of something, just as wireframing software can bend the “wires” of code to “frame” a website.  This may seem obvious and simplistic to compare wireframing software with a wireframe deer, but this explanation helps illustrate what wireframing software does, and that many “computer” terms, like wireframing software, actually may have roots in the physical.  Now, go talk to your deer, it might just tell you a little about “wireframing software”.

At the Consumer Electronics Show in Las Vegas a new type of thinner glass was exhibited that will be installed in many smartphone devices this year. The glass promises to be more touch sensitive and to provide a brighter user interface for smartphone users. Developers of mobile apps and websites must understand how users will respond to this new glass. Some developers are turning to clickable wireframe software to help them prototype UI designs.

What are clickable wireframes?

Clickable wireframes are interactive mockups of user interface designs. Clickable wireframes can be used to prototype websites or software applications. The advantage of clickable wireframes over static mockups is that clickable wireframes feature interactive elements. If you are able to use your clickable wireframes in usability testing, your clickable wireframes will help you see how users interact and navigate around your interface design. This is because with clickable wireframes, you can create UI elements like buttons, links or menus that respond like the end product.

How can clickable wireframes improve usability?

Clickable wireframes can be used in usability testing. As users interact with clickable wireframes, designers are able to see what interactive problems arise during use of an application. You may discover that in your clickable wireframe some elements are too close together for users to touch with their fingers. Some clickable wireframe software even lets you display your design simulations directly on smart phone devices. This means you can try out your clickable wireframes on a new device with thinner glass. You can therefore see through your clickable wireframes how much precision has improved. You may decide to be more ambitious with your clickable wireframes for devices with this improved technology.

Purpose of Corporate Blogs

Corporate blogs are a great tool for companies to keep their customers (as well as the greater public) in the loop and increase customer loyalty.
Corporate blogs are blogs with very specific purposes that can be divided into the following categories:

•    Communication: Corporate blogs should be used to communicate with customers and the public; this is the most significant reason for companies to have corporate blogs.  Corporate blogs provide customers and/or the public with direct lines of communication to the company’s employees or even executives, thus empowering customers, leaving them feeling like valued stakeholders.  Conversely, executives and employees also value interaction with customers so corporate blogs are an effective and valuable tool for both sides.

•    Marketing Products and Services: Corporate blogs are also an excellent way to advertise new products and services.  Companies can also obtain valuable customer/user feedback about new products which can help them improve their offers for the future.

•    Maintaining Reputation: Corporate blogs can also help companies maintain or improve their reputation within the public sphere because they can be marketed as the only reliable source for accurate information about a company or venture.  This is especially important with so many other unverified sources floating around on the internet.

Corporate blogs are not the same as traditional blogs.  Traditional blogs are usually maintained by individuals or groups as a way of sharing their thoughts, ideas, advice, and experience.  Corporate blogs are a part of business and as such their purpose is different.  Maintaining a corporate blog is an excellent way to make a business not only more visible, but also more successful.

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

How to conduct the Affinity diagramming process

During the planning phase of the Affinity diagramming process, one should first gather a team of four to six people. Preferably, the group should be as eclectic and diverse (but also relevant) as possible so as to ensure the delivery of as wide a group of ideas as possible. As far as time is concerned, it is optimal to set aside at least, preferably, two hours. You should encourage team members to go for their gut reactions and not spend too much time agonizing over sorting. One of the goals of Affinitization is to reach a consensus so that disagreements can be handled simply. If a team member doesn’t like where an idea is grouped, he or she simply moves it. If consensus is not reached then make a duplicate card of the idea and place a copy in each group. Moving ideas at will without talking encourages unconventional thinking while simultaneously discouraging semantic battles. Here below are the steps to follow during the affinitization process:

1.    Generate ideas – This is where the team brainstorms a list of ideas and writes them down on separate post-it-notes (or some other form of cards).

2.    Display ideas – Post the ideas randomly on a wall, board, table, flip chart paper or other surface.

3.    Sort ideas into related groups – Ask the participants to silently sort idea cards into groupings. This can be done by first looking at two ideas that may seem related
in some way and placing them together in a column off to one side. Then other ideas that seem related to those set aside can be added to that group. Other ideas that are related to each other are also placed into a group. This process is repeated until the team has placed all of the ideas in groups. Ideas that don’t fit in any group shouldn’t be forced into a group. They don’t belong but should stand on their own. Create sub-groups where necessary.

4.    Create header cards – Each group needs its own header card, which concisely describes what each group represents. These should be meaningful enough without having to resort to the contents of their group. Create sub-header cards for sub-groups if necessary.

5.    Draw the Affinity Diagram – Place header cards at the top and corresponding ideas below. Draw lines connecting the headers, sub-headers, and groups. Connect groups that are related too. The resulting diagram should look like a typical organizational chart of a firm.

A great practical application of Affinity Diagrams is to help organize notes and data derived from usability testing of wireframe prototypes of a user interface design. This visual tool aids the whole interface design process by making it easier and faster to make sense of the data collected while gathering requirements and conducting usability tests.

This blog post is the second in a series of two about Contextual Design as a usability method.

The Contextual Design sequence

In the first post on Contextual Design we clarified what Contextual Design is and why it is important for creating usable UIs.  Now it is vital that we discuss how the Contextual Design process occurs. Contextual Design is a process that happens sequentially in the following hierarchical steps: Contextual Inquiry, Interpretation, Data Consolidation, Visioning/Storyboarding, User Environment Design, and Prototyping. Each of these steps is equally important in contributing to the synergy of the Contextual Design process and buttresses the resultant user interface design in a positive user experience.

•    Contextual Inquiry:  Contextual Inquiry is the crux of Contextual Design. It is used to reveal what people actually do and why they do it that way. Contextual Inquiry happens at the very beginning of the design process and calls for one-on-one field interviews observing subjects in their natural working or living environment doing what they would normally be doing.
•    Interpretation: The interpretation phase is when the data from all the interviews is analyzed and detailed work models are created in order to ascertain context of use and aspects of work that matter for the user interface design team. What matters here is looking at the interviews from a macro birds-eye-view level for key insights across the board.
•    Data Consolidation: Data consolidation is the level at which individual interviews are analyzed. An example of a good method of processing observations from a bottom-up design approach (piecing together systems to give rise to grander systems) for data consolidation purposes is by making affinity diagrams.
•    Visioning/Storyboarding: Visioning is akin to brainstorming, but distinctly it is the gathering of a cross-functional team in order to create stories or visions of how new product concepts, services, and technology can better support a user in accomplishing her tasks. After determining key issues and opportunities from the consolidated data, the visioning team sets out to generate new concepts by way of scenarios of use. These visions are then fleshed out further through the use of Storyboarding.
•    User Environment Design: User Environment Design is the stage of Contextual Design whereby the stories created begin to become more refined in terms of product and system requirements. What are the different parts of the system? What functions are available in each part? How do all these components support and enhance a user’s work?  Where in the user interface design scheme should they be integrated? User Environment Design seeks to answer these questions.
•    Prototyping: Prototyping is an efficient way of creating preliminary partially functional UIs that can be used to test the structure of a User Environment Design for usability issues. But prototyping is also great as a communication tool for stakeholders of a project to flesh out user interface design ideas. Prototyping can be done through the use of paper prototypes (hand drawn or printed out) or, better yet, through interactive wireframe prototypes.

Performing these steps is an art of itself but can be immensely helpful in creating superior UI designs.

This is the second part of my two-part blog on ethnography and its relation to usability engineering and user interface design.

How to conduct an ethnographical usability test

Ethnographic studies tend to be relatively costly to conduct, as an observer needs to care for planning and logistical costs. Other associated costs include the resources needed to create, design and publish results (usually in a comprehensive report with artifacts). The participant fee and refreshments (for both observer and subject) for the duration of the observation also add to the costs. However when done well, ethnographic studies are appropriate for qualitative endeavors, aimed at understanding the circumstances and environment users and customers are engaged in when making decisions. They’re also very important for understanding the localization factors with products and services with an international reach. James Hom’s Usability Methods Toolbox (usability.jameshom.com) provides a good example of how to carry out a usability test using the ethnographic method of inquiry.

1. Choose your participants

The first step is finding a wide but representative sample of various users of the product your interface design intends to address. This means selecting participants from “different workplaces, industries, and backgrounds”. Once the participants have been identified, proceed to schedule the observations, in their native environment of course.

2. Interview participants

A vital part of field observation is inquiry. You should interview the respondents regarding the interface design in question. Why do they use the interface design? How do they use the interface design? How does the interface design relate to their personal life and/or professional life? How do they think their environment and personality influence the way they use the interface design. Getting answers to questions like these allows the observer to gain valuable user experience feedback right from within the context of the users’ native environments.

Identify artifacts and outcroppings

The observations and remarks of the subjects sometimes do not fully paint the complete picture needed for a comprehensive understanding of the context of use. To ensure adequate data collection, you can identify as many artifacts and outcroppings as possible. Artifacts and outcroppings are the little observations that help complete the puzzle, as it where. What exactly are artifacts and outcroppings?  Artifacts are physical objects used at the site (notebooks, forms, walls, desks, chairs, pens, computers, etc). Outcroppings are the noticeable unique physical traits of the site (size of cubicle or desk, notes that are written on forms, etc). Understanding the artifacts and outcroppings contribute to a better overall understanding of the user’s native environment and what tools are at the user’s disposal.  However, do not go crazy collecting this information. Collect and observe only what you think really affects the user’s interaction with the interface design.

Use tools to collect data

The data that make up the interviews, artifacts and outcroppings are collected and catalogued using various tools. The most rudimentary of these is the anthropologically tried and tested paper and pen combination.  Advances in technology have inevitably increased the arsenal of recording tools that now includes audio recorders, photo and video cameras or specialized software. Each of these tools has its pros and cons and often a combination of these is used during a field study. Some tools are more appropriate for recording particular aspects, for example, the use of photo cameras being well suited for recording artifacts. Video cameras can help overcome observer’s bias and so on. Using these tools will help you amass empirical data that can be easily utilized during the data analysis phase of your ethnographical usability test.

Data analysis

Once you have collected your empirical data from interviews, artifacts, and outcroppings you can then make an analysis of your findings. Explore the ways in which each different user group used the user interface design differently. See to what degree their unique native environment influenced this. As always, compare and contrast the users but also look for similarities and a unifying pattern, something that embraces the user’s differences.  This will be what helps you find a strategy for creating an interface design that provides optimal usability to the target users.

Desirability and usability as a design team

According to John Soellner’s article “Design, Usability, Desirability, What’s The Difference?” desirability design is “about expanding on the idea of what human factors are” in order to better understand what drives users to employ interfaces based on their interest level and personal satisfaction.  Desirability can be functional and emotional.  Functional desirability is almost interchangeable with usability in that it means users desire to use a site because it is usable and well organized.  Emotional desirability breaks away from usability because it seeks to understand a user’s emotional reaction to the aesthetics of a user interface: the look, feel, and even the content.  Emotional desirability concerns itself with the intangibles and emotional human factors that Soellner refers to above.

Desirability works well in tandem with usability because it measures the intangible aspects of user experience such as fun and enjoyment, aspects that usability itself usually cannot address.  Desirability helps designers discern whether or not their user interface is enticing enough for users to want to employ, reaching beyond whether or not it is easy and functional enough for users to want to use.  “Desirability design techniques supply the X Factor which motivates users to make usability matter” says Soellner.

Usability is one of the foundation stones of UX design, but as a concept and a design method it does not come without limitations. One of the main shortcomings of the usability concept is its inability to account for the level of interest and desire within users relative to the employment of a particular interface design.  Of course the fact that a user interface is well organized and structured (in other words usable) usually makes it, in most cases, popular, but it is not usability alone that compels users to seek out and maintain a relationship with a given interface design.  For that, designers are learning that there needs to be a certain level of enjoyment and fun for the user. The notion of using fun and enjoyment to compel users is encapsulated by the relatively new design concept desirability.