Category — Interface Design

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.

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.

This is the second part of my two-part blog post on psychological manipulation through the user interface design of e-commerce sites. In this part I shall discuss other user interface design elements that encourage purchasing.

What other user interface design elements encourage purchasing?

Another way that e-commerce sites encourage purchasing through user interface design elements is through time. Adding the urgency of a clock running down to the user interface design encourages decision making in a “I better take this opportunity before it goes away forever” way. Ebay and Groupon are two great examples of e-commerce websites that incorporate this into their user interface design/ user experience. Groupon even introduces the characteristics of peer pressure into the whole mix. Their user interface design showcases the number of other users who have signed on. However it is also the time limit placed on the product that accelerates a users decision making. The user interface design also shows how much a user would save by signing on to the deal. The psychological call-to-actions don’t just stop there as there is also a convenient ‘Buy it for a friend’ conveniently placed to drive users towards purchasing even if a particular deal might not be for them. All these user interface design elements combine into a hard to resist cocktail that encourages purchasing in one way or another.

How do some e-commerce sites counter the negative feedback of impulse buys?

Psychologist working for retail companies have long been aware of the guilt that burdens shoppers who have undergone impulse buys. This guilt needs to be minimized as it can engender thoughts of returning the product as a defense mechanism. One of the ways e-commerce sites, Apple in particular, counter this negative feedback is to delay the negative feedback loop. With their App Store, Apple decided to not send receipts the moment of purchase. This tactic is simply so as not to instantly remind the user of their purchase as seeing the consequences would be negative feedback. In the case of the App Store this is absolutely understandable. Most apps don’t have a trial version of the full version. This means that for many users forking over cash is the only way to really get their hands on an app. Naturally if it turns out that the app was not all it was cracked out to be then negative feelings out of the impulse buy might brew. Next time you’re about to go on a shopping spree online ask yourself who’s pulling the strings?

Despite shutting down Google Labs the spirit of innovation is still alive and well at Google in the shape of Gmail Labs. In the line of user interface design tweaks such as the Important First and Priority Inbox views comes a new way to view your Gmails. The aforementioned views, however, were never dramatic changes to the Gmail user interface design but simply sat well with the original List View. The list view user interface design is after all the classic way webmail has been displayed. However user interface designs that provide a preview pane for a meaningful glance into emails have been adopted by most of the popular webmail services albeit in their own particular way. Of course the use of a preview pane user interface design for email is nothing new and is the way desktop email clients work.

Well Google has now finally joined the preview pane user interface design party. Well to be honest Gmail for tablets already has preview panes incorporated into its user interface design and one does suspect that it was the tablet version that inspired Google to port this feature over. One blogger even mentioned how he used to run his iOS simulator to check his email on the iPad version of Gmail due to its superior user interface design. Once the preview pane is enabled users can toggle between no pane at all, a horizontal split or a vertical split by clicking on a button on the top-right of the screen. I found this to be refreshing where  preview panes on other webmail services tend to either have  a horizontal or vertical pane. The adoption of the preview pane into Gmail’s user interface design is bound to keep Gmail users from switching.

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

Waterfall Design is a methodology used by user interface designers during software development or more precisely during user interface design. The name waterfall design comes from the imagery of water flowing from the top into a waterfall until reaching the rest of the river down below. Just as the direction of dear old H20 in a waterfall can only be one way, waterfall design is a process that happens sequentially. So when creating a UI design using the waterfall design methodology one has to first complete a phase in order to go on to the next. In the rest of this blog I shall briefly overview the process with the 2nd part of the blog showing some of the ways user interface designers can implement it in their projects.

How does the waterfall design process work in UI design?

The waterfall design process dates all the way back to 1970 to a director from the Lockheed Software Technology Center named Winston W. Royce. Back then he did not coin the term waterfall design but, nevertheless, he published an article detailing the various phases that user interface designers would use in the waterfall design process. The seven phases are as follows:

1.    Requirements specification: In order to know what is required of a user interface design it is necessary to create a set of use cases detailing the interactions users will have with it.

2.    Design: At this stage UI designs create the overarching supra-structure of the user interface design to house and facilitate the use cases of the future software or website.

3.    Construction: After deciding on the look and information architecture of the UI design the actual coding begins.

4.    Integration: Here user interface designers ensure that the different parts of the user interface design are consistent and functional throughout.

5.    Testing/ debugging: A user interface design may look good but more importantly it has to be usable. Conducting usability tests helps ensure this.

6.    Installation: At this stage the final version of the UI design is implemented.

7.    Maintenance: Just as with anything man-made maintenance is key, this applies not just to the user interface design but also in terms of customer support.

Each of the successive steps is meant to build upon the last one to contribute to the overall goal. Waterfall design is rigid in a sense in that it’s either the waterfall design way or the proverbial highway. In the 2nd part of the blog I shall go into the benefits and drawbacks of waterfall design when it comes to user interface design.

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.