Website building applications

Website building applications provide users the ability to construct a website using design ready tools. Users build websites using templates and function or feature options provided by the website building application. With website building applications users only need to select their templates, functions, and features, and then simply enter in content, be it words or the uploading of photos. Website building applications provide users with coded, finished programs that can be published. Often, these website builders are included with hosting packages or are readily available in different quality levels. Be careful, since they often differ by ease-of-use.

Website builders are targeted at private individuals and very small businesses wishing to quickly create a simple, cheap web presence. Website builders limit users to the particular design or layout templates available, and while it is easy and quick to publish a site, it often does not fulfil all needs or wishes of users looking for a more advanced, customized website with functions not provided “off the rack”.

Wireframing

Wireframing tools allow users to create low or high fidelity wireframe prototypes as visual guides that lay out the structure of a given website and the relationships between the interface design’s pages. Wireframes are not finished code, and so they are not suitable for immediate publishing as a website. But they give the user much more flexibility regarding the user interface design of his website in the works, going far beyond the options provided by website building applications. A wireframe is an outline of a website’s structure that allows users to explore the following relative to their future interface design:

•    ideation: the process of creating new ideas

•    conceptualization: the formation and interpretation of concepts

•    usability tests: the process whereby users and designers evaluate a given wireframe prototype

Since wireframing is a before programming process, its goal is to give designers the ability to evaluate the converging and diverging features of the prototype in order to submit an outline that will eventually become a successful and usable interface design. Wireframe prototypes are an ideal way to involve different stakeholders in the process of creating a website, and in combination with usability testing, they lead to better interface designs for applications that professionals rely on for their commercial purposes, such as e-commerce shops or other portals. Wireframes are not meant to represent or generate finished code, and exist mainly as a basis for exploration and improvement of a given interface design. The implementation has to be done separately.

Which method best suits your needs?

If you are building a website, the process you choose depends on what you want and need. If you are constructing a website for personal use, for example for birth or wedding announcements, then website building applications are appropriate because they are simple and do not require much effort on your part. Since such sites often contain only simple information (text, images, links), your personal needs can be fulfilled by website builders. As long as you are satisfied with using their standard templates. If you have a bigger, more professional project in mind, such as creating an interface design for a corporation or for eCommerce purposes, then using wireframing software will allow you to follow a design process that permits you to create highly individual, interactive website concepts and in the process optimize usability. For example, programs like the Pidoco rapid prototyping software give you the ability to create interactive, wireframe prototypes that can e used in usability tests within the same software and facilitate your capacity to discern the requirements and constraints of your future interface design as they relate to usability and user experience. In summary, choosing between wireframing and website building applications boils down to your personal needs vs. professional needs.

This is the second part of my 2-part blog post on design patterns in interface design. In the first part I looked at what design patterns are and advantages of using them. In this part I shall look further at the types and examples of design patterns as well as some potential drawbacks.

What are the different types of design patterns?

Design patterns are generally subdivided into three categories. Creational patterns are design patterns used to create objects that suit a number of software programming scenarios and mechanisms. Structural patterns are design patters that are concerned with the relationships and interactions of entities in your interface design. Structural patterns often deal with the functionality of your interface design. Behavioral patterns are design patterns that recognize common communication patterns between objects and realize these patterns. Recognizing these patterns makes communication more flexible and fluid during the design process. These patterns are exemplified by communication algorithms within or behind your interface design, or any commands that you may want your interface design to allow the user to execute.

What are examples of design patterns used in the interface design of websites?

An example of design patterns employed in the interface design of websites is Account Registration. Design patterns include best practices and can help prevent faux pas to watch out for when designing your website’s account registration process, such as not having a consistent design for the login and signup buttons as well as not making the said buttons easily identifiable. A design pattern would also tell that after a user logs in you should return them to the page they came from such as redirecting users to the comment form. Another example of a design pattern used in interface design is Tell-a-friend. This is used to enable users to share the content of your website with friends or anyone who might be interested with ease.

What are some drawbacks of design patterns?

Design patterns, like all methodologies, have been subject to criticism. Design patterns try to standardize what are generally accepted as best practices by computer scientists, information architects and interface designers. Standardization seems beneficial, but in practice it can result in the unnecessary duplication of code – a potential waste of time in your interface design. Using design patterns as a usability method in interface design can be difficult if one is not well versed with computer science. Although design patterns are not impossible to learn they may take some time and experience getting familiar with them in order to make the most of them. Yet, they may really be worth the effort.

What are the benefits of paper prototyping in user interface design?

From a usability and interface design perspective, paper prototyping has many benefits.  Paper prototyping is easy and requires no technical skills, allowing people of all levels of technical ability to participate in the design process.  Paper prototypes allow you to critically examine their interface designs from the start, thus avoiding the need to fix usability errors later in the process when fixing is much more costly than drawing up a new prototype.

Paper prototypes also lend themselves well to rapid iterative development because you and your team can experiment with several interface designs that can easily be tested for usability.  The simple nature of paper prototypes can also make users feel more inclined to provide detailed and constructive feedback because they are not overwhelmed or intimidated by the paper prototype.

When organizing a task analysis, follow these steps:

1.    Assemble a group of 4-10 people (people can correspond with the amount of subtasks if you choose)

2.    Choose the task you want to analyze as a group (pretty self-explanatory).

3.    Break this task down into 4-10 ‘subtasks’. These subtasks should be logical and specified in terms of objectives. Make sure that your subtasks contribute to the overall synergy of the original task in question. Each group member should be responsible for a subtask.

4.    You can draw (or even wireframe) your subtasks as a diagram to ensure that all categories and objectives are relevant and logical.

5.    Commence with the ‘decomposition process’. Each group member should hypothesize the various ways in which users can perform tasks by testing out different methods on themselves or other group members. Make sure that your detailed analysis of job performance corresponds to cognitive reasoning. Encourage all group members to be as detailed as possible.

6.    Discuss results and determine ways to incorporate the information gathered from your task analysis into your user interface design.

Task Analysis Pitfalls

Task analysis allows you to build a model that organizes all the relevant information related to a task that needs to be accomplished by your users. However, the cognitive nature of this information means that a task analysis is more psychological than technological—the results are rather abstract. Thus, task analysis cannot really help you tackle technical or design questions outside the realm of direct user behavior information. The results have to be “translated” into a great user interface design.

Task analysis can also be tricky because it requires a very in depth analysis of very small tasks. This can be time consuming, so make sure that when you are conducting this type of usability method, you choose a group of patient and focused participants.

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

How to generate scenarios of use

Scenarios of use are not exceptionally difficult to craft, which makes them an attractive usability method.  Creating them, however, is easiest if you have a facilitator with strong communication and interpersonal skills—this helps boost group morale and creates an atmosphere that has a higher level of productivity.  When creating your scenarios of use, try to generate a number of scenarios that cover a wide range of circumstances, both positive and negative (the negative are called ‘misuse cases’).  You want to be sure to include misuse cases so you can investigate non-functional requirements such as the security and accessibility of your interface design.  You should go through all scenarios of use by yourself or with your group before you include stakeholders.

What are the 8 steps to developing scenarios of use?

According to Edward Kenworthy’s 1997 book Use Case Modeling: Capturing User Requirements the eight steps to developing scenarios of are:
1. Identify who is going to be using the website (this also works for other web-based, desktop-based or mobile applications).
2. Pick one of those actors.
3. Define what that actor wants to do on the site. Each thing the actor does on the site becomes a scenario of use.
4. For each scenario of use, decide on the normal course of events when that actor is using the site.
5. Describe the basic course in the scenario of use. Describe it in terms of what the actor does and what the system does in response that the actor should be aware of.
6. When the basic course is described, consider alternate courses of events and add those to “extend” the scenario of use.
7. Look for commonalities among the scenarios of use. Extract these and note them as common course scenario of use.
8. Repeat the steps 2 through 7 for all other actors.

What are the limitations of scenarios of use?

According to Alistair Cockburn, scenarios of use are an indispensable usability method, but they do not “take care of system design, user interface design, feature lists, or testing”.  Thus, scenarios of use can only assist you in laying the foundation for a great user interface design; scenarios of use help you hypothesize about your interface design, but they do not aid you in the actual feature design or edits of your prototype. Scenarios of use provide guidelines and suggestions only, but are still very useful because they help you identify the points in your interface design upon which you should focus design effort and subsequent usability tests.

This blog post is the second in a series of two about brainstorming as a usability method

How to conduct a brainstorming session

What you need for a brainstorming session

•    4-6 participants

•    Adequate location

•    A question to discuss

•    Note taking tools (paper, white board, word processor, markers, pens etc.)

•    Positivity—leave judgments and preconceived notions at the door!

So you learned what brainstorming is and why you should do it as a usability testing method from the first part of my blog post, but now you need to know how to do it. Before you begin your brainstorming session, you must first pick a question to present to the group or to yourself as an individual. The question should be neither too narrow nor too broad.  For example, brainstorming header fonts is too narrow and brainstorming on how to satisfy customers is too broad.  More appropriate questions would be: “What service for mobile phones is not available now, but needed?” or “What are some strategies for developing a new software usability test?”  Larger questions can be addressed but they should then be broken down into smaller brainstorming sessions.

You should also have a method for keeping track of ideas during a brainstorming session.  You can have post-it notes, a white board, or someone who types “meeting minutes” that can later be disseminated via email among participants.  It is important to talk and come up with ideas, but even more crucial to remember them!

Make sure to set some ground rules aimed specifically at reducing social inhibitions among participants while simultaneously increasing their creativity.  If you follow these four basic rules for brainstorming, you will be in good shape to achieve the aforementioned goals:

1.    Focus on the quantity of ideas produced: spreading the net as wide as possible increases the likelihood of producing a radical and effective solution.

2.    Withhold criticism: withholding criticism until the last stages of a brainstorming session is vital because early criticism can become a bottleneck hindering the flow of creativity.

3.    Encourage unusual ideas: suspend your assumptions and encourage the production of ideas that are not only unique, but also atypical.  This leads to an increased volume of ideas and a higher likelihood of an original solution.

4.    Combine ideas: you should encourage participants to combine their ideas as this will improve them and augment the sense of group solidarity.
Finally, if you are conducting a group brainstorming session, how do you select participants?  As a rule, you should select a heterogeneous group so that the diversity of generated ideas reflects the diversity of the thinkers.  Diverse participants can come from different careers, education levels, cultures, genders, and ages.  Diversity in participants cultivates diversity of ideas. However, sometimes you want to have group members who have a little more in common.  For example, if you are conducting a brainstorming session on software usability, you may want to ensure that there is a common link of technology and interface design knowledge among participants.

Docs users can also chat in real time with collaborators as they evaluate spreadsheets, proposals, and other written projects. MindMeister specializes on online mind mapping and allows users to create, edit and share mind maps very easily and collaborate on them in real-time. Pidoco offers its users real-time collaboration possibilities as they create wireframe prototypes of planned user interfaces for web, desktop or mobile applications, including applications for the iPhone or iPad. Pidoco users are able to send collaborators links to their wireframes for editing and user experience feedback purposes and for conducting usability tests to improve the user experience of applications. These and other applications underscore the importance of web interfaces design that keeps in mind usability and time-effective functionality.

From the range of tools now starting to offer real-time collaboration capabilities, it is apparent that this modern form of team work is becoming increasingly important, especially as globalization, cross-border cooperation and outsourcing intensify. While real-time collaboration is useful in such general settings as creating text or spreadsheet documents, it can be seen from the examples above that many specialized areas are discovering the advantages of it. Web interface design, for example requires active engagement and feedback. In order for designers to stay competitive and relevant in the world of web development, they need to have the ability to collaborate with colleagues, clients and users in the fastest way possible. And similar arguments can be applied to many other fields where individuals and businesses try to be innovative in their processes in order to remain competitive.

Our conclusion of Rapid Digital Prototyping: It’s got the look and feel of handmade scribble prototyping, but adds interactivity (making wireframes clickable) and enhances 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.) GUI designers can create clickable and animated web or software interfaces just in seconds. 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 will later be overhauled anyway.

Have you ever thought about outsourcing some of your web developments? I did and it caused me a lot of headaches! Outsourcing services like Elance or RentACoder sound intriguing in the first place, and it seems that you get a lot of bang for your buck – in theory!

But the real experience looks quite different! As everybody knows in the web world, there is a lot of room for misunderstanding when it comes to getting the idea of a project across. Even if you design the most important screens in Photoshop so that the coder roughly knows how the style guide looks, there will always be stuff in a static screenshot that can be interpreted one way or the other.

And just telling the outsourcing provider to “get back to me when something is unclear” does not help. To the developer it is absolutely clear what to do and how – but he thinks like a coder thinks and probably not like the marketing person who was posting the web site job on the outsourcing platform.

In other words, a good project description (aka specification) and continuous communication is king in such an outsourcing project. Fine, but here another problem occurs: Ever tried to get your message across in plain English (e.g. via Skype), when your service provider just speaks Hindi or Russian and broken English? This can end in a real disaster (and in my case it did with some of the projects I outsourced through Elance).