Category — Interface Design Tools

While the world wide web is often considered to be a symbol of a truly international form of communication, there are some boundaries that still exist. Even after the language barrier, there are cultural differences, which affect the very way we use the internet. This can be seen even in the user interface designs of websites.

When looking at the complexity of user interface design, it’s important to look at the functions users from different cultures expect from a website. Some international firms create entirely different user interface designs for their websites aimed at users from Europe and Asia. This is done to improve usability of the user interface design for local and international users. Components, such as color and graphics, play an important role in many cultures, which should be reflected in the user interface design. However the functional layout of user interface design can also vary across cultures. When we consider that Japanese script is often written vertically, this changes the way a Japanese audience reads text on the internet and navigates through a user interface design. While people from some cultures are more patient when it comes to searching though user interfaces, others appreciate efficiency. This is why usability is key and needs to be considered with the relevant audience in mind. When creating a user interface design, it is important to think about the hierarchy of information for a user. What information is most important to them and what do they want to access more quickly.

In order to create a universal user interface design, simplicity is usually the best option. Information should be clearly laid out and easy to access. If you want to see how your international users respond to your user interface design, you need to observe how they interact with your website and optimize the accessibility of your website across cultures.

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.

What is parallel design and how does it relate to user interface design?

Parallel design is a useful method when undertaking a user interface design project, or any other creative process for that matter. The basic concept is to accumulate as many ideas as possible and then to take the best ones and synthesize them into better concepts of user interface designs. In many ways evolution is synonymous with the process as a natural selection of ideas occurs with the best ideas cannibalizing on others to emerge as the apex predators of the ideas ecosystem. Parallel design in effect thrives on the input of user interface designers as it requires a stream of ideas. The freedom and impetus to be as creative as possible can be a very liberating way of creating user interface designs.

How to create UI designs through the parallel design process

To further accentuate the generation of ideas a team of user interface designers is further split up into subgroups that brainstorm independently. Wireframing tools are great in this regard as they allow user interface designers to quickly sketch UI designs. Online wireframe tools that create clickable wireframes even further add to the convenience of creating wireframes. The user interface design groups are encouraged not to discuss their UI designs or show any wireframes  thereof until a workshop is held. At this point the UI design teams showcase their wireframes and use the best ideas to create a better user interface design. This process is repeated in cycles (it is recommended to go through at least four of these cycles) until the general user interface design is achieved. As the English say ‘the proof of the pudding is in the eating’ and the pudding of parallel design is repetition and collaboration. In the 2nd part of this blog I shall look at the benefits and drawbacks of parallel design when creating user interface designs.

According to TechCrunch researchers from the University of Washington undertook a study on the usability and user interface design of the Kindle among its student body.  The findings suggest the user interface design of the Kindle makes them unpopular amongst college students. The reasons for this are that the user interface design of the Kindle makes it difficult to skim through content, look-up references or even take notes. To be fair the user interface design “problems” are a little harsh on Amazon considering the Kindle was not intended for those uses. The Kindle was designed for leisurely reading and not combing through and editing mountains of academic material. One thinks of the Kindle as a vehicle for Amazon to pump out more novels and some such fodder.

How can the Kindle over come its user interface design “problems”?

This makes the Kindle an incomplete companion as students in the study were switching to a nearby computer to look up references or other such tasks. Some even would bring along extra paper since the product and user interface design of the Kindle is not suited to writing notes in the margin, highlighting key passages, and underlining etc. In effect the study seems to be calling out for the Kindle to feature more of the functionality and user interface design of the iPad. A fully-fledged tablet seems to be exactly what Amazon is working on. The rumored device is expected to feature Android Honeycomb with its much vaunted tablet-centric user interface design. Since Kindle is available as an app for desktops, smartphones and tablets it remains to be seen what the unique selling point of the Kindle tablet would be.

What is Computing Transparency?

Computing Transparency is a vital aspect of HCI (human computer interaction) and is connected to issues of clarity and usability in user interface design (UI design). The Merriam Webster Dictionary lists a number of characteristics that show how the term transparency literally refers to the quality or state of being transparent: Fine or sheer enough to see through, free from pretense or deceit, easily detected or seen through, readily understood, characterized by visibility or accessibility of information especially concerning business practices. Transparent hence implies that actions or information are clear, truthful, and easy to understand.  So transparent is a good term to apply to usability or UX design.

In applying the term transparency to Computer Science we encounter the idea of Computing Transparency.  Computing Transparency refers to a system that incorporates user friendliness and alleviates the user of the need to worry about technical details (installation, downloading, updating or device drivers).  For example, this may mean detecting monitor resolution automatically rather than requiring the users to do so themselves and adjust the program manually, thereby easing the system usage for end users.  The term is thus straightforward: systems and programs that are transparent for the user mean that they can operate with ease and with little need for attention to detail.

Why is Computing Transparency important?

Computing Transparency is an important aspect of UI design since systems that are lucid and understandable will ultimately facilitate optimal usability.  The idea of a system or graphical user interface design being transparent means hiding or avoiding its complexities; the less users have to think about what their system is doing or how to make if function more optimally, the more likely they are to use it.  Since usability is the omnipotent force in interface design, Computing Transparency is a powerful principle with regards to usability.

Computing Transparency and Privacy

Another aspect of Computing Transparency is linked to privacy.  Programs and applications that guard or use personal data should be transparent in their method of doing so.  If user interfaces are in unclear about the way they deal with their customer’s private information, the results can be disastrous—as can be seen from the recent Facebook scandals.  When it comes to user privacy the term transparent is crucial.  Just as citizens beg their governments to practice transparent politics, so too do the clients of user interfaces.

For many years now, outsourcing has resounded through the land. But still it is linked in our heads with big companies which give some work away because they either do not have the capacity to carry out the work themselves, or want to save money by using this strategy. However, nowadays it is not only big companies anymore who try to gain from this process, but more and more small businesses and private people.

The advantages of outsourcing

But what are the advantages of outsourcing and how can these be generated? The system is easy. If you as a company – (whether a small or big one) – would like to give previously performed in-house tasks to an external provider, you can simply give the contract to a third-party who you will pay to carry out the task on your behalf. The main advantages include cost savings, being able to focus on your core business, overall being able to improve the quality while increasing flexibility at the same time. Collaborating with external experts allows customers to calculate their business costs more precisely because the costs only occur for a certain period of time.
But how can you find such an external provider, and how do you know if the price you are paying is not too high and if the proposal is really the best you could get? One possibility is: Using global internet platforms which arrange services for you in order to meet your individual needs. One of the biggest in Germany is twago.

Team Work Across Global Offices – twago

twago is a Berlin based company which focuses on outsourcing and offshoring of online services. The overall goal is to achieve the best performance for the best price for the customer. The more precisely you know what specific task you would like to have done, e.g. programming, web design, user interface design, etc., the better it is. You simply post your project with a detailed description on the platform and receive proposals from all over the world from up to 20,000 providers. These service providers can be companies or freelancers. You can find a service provider who best fits to the individual project. Whether you are looking for a service provider from around the corner to meet up face to face or you prefer a freelancer from a specific country, twago offers the possibility to find the right service provider with suitable skills. You choose the one that best fits your needs and preferences. And the best of all: Using twago is easy. You just have to register, post your project and award it to your provider of choice. Should you need any help or special service the kind twago employees are ready to support you. You can try it out at: http://www.twago.com.

Companies today realize the value of providing outlets for communication with their customers.  Blogging is an effective method to do so and has thus given rise to the corporate blog. However, corporate blogging is much different than the traditional personal blog, particularly in its purpose.  Let’s take a look at the main purposes for creating a corporate blog, in addition to pointing out how their purpose often differs from the traditional blogs.

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.