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.

Google appears to be slowly ushering in new user interface designs to their web app tools.  Among the most talked about in the blogosphere is the experimental YouTube user interface design dubbed Cosmic Panda. That YouTube is the world’s most popular video site is beyond question but this success has rarely been attributed to the YouTube user interface design. Well at least recently! YouTube’s user interface design has been looking more and more outdated in an era of minimalistic and polished user interface design. Although there have been numerous changes to its user interface design one gets the feeling that the UI design team decided to make sure YouTube is instantly familiar to users who haven’t used the site much since its inception 8 years ago. If the Cosmic Panda user interface design is finally released then this would certainly mark the biggest UI design changes YouTube has yet seen.

The new look and feel of the user interface design  features darker UI design themes and lightbox type elements that make the videos more prominent. Related videos now appear at the bottom like a filmstrip rather than on the right sidebar. The user interface design of Channel pages has also been revamped with larger pictures of videos. This naturally means that less videos are visible at a go but the trade off in user experience is a worthwhile one. An option that I would have liked would have been the ability to watch directly from this list view like one would on Facebook. Most promising of all, however, is the ability to browse and search while watching a video but this feature is currently only available to Chrome users. It must be said that the new user interface design is similar to that of Hulu which is a good thing. Hulu has a characteristically uncluttered and polished user interface design that coupled with YouTube’s market share, higher selection of videos and brand awareness will please users.

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.

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 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.

Our conclusion of Rapid Digital Prototyping: It’s got the look and feel of pen and paper, but adds interactivity (making wireframes animated) and accelerates developing speed through re-usable elements and layers. Many (real-time) collaboration features enable interface designers to new ways to work with much better time allocation, leaving more time for the creative process that really counts.

Through prefab stencils (e.g. radio buttons, links, navigation items, controls etc.) interface designers can create clickable and animated web or software interfaces in no time. Without any programming skills, interface designers can focus on the web concept and use cases, site structures and the overall layout of the site, instead of getting lost in details that only matter at a later stage of the project.