Category — user interface tools

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?

I was going to do a Google search when I saw a little link below the search bar stating, “New from Google Cultural Institute”. It piqued my interested and I followed the link to find a project Google was working on concerning Nelson Mandela, a former president of South Africa who stood for social justice. The UI design was quite interesting.

Nelson Mandela Digital Archive project: UI design
When you follow the link from the Google Cultural Institute page to the Nelson Mandela Digital Archive Project, you are confronted with a UI design that is full of pictures and with few buttons. I could enter the site by clicking on the picture (or on the corresponding button at the bottom left hand corner of the picture). This takes me to another level of the website where I can intuitively advance by clicking the arrows on my keyboard. The UI design must have involved a lot of usability testing, because I didn’t have to even think twice about using the keyboard arrows and it wasn’t until after I had scrolled through and viewed the photo album of his life, that I recognized that I had seamlessly switched from using my mouse to my keyboard.

UI design pros
According to “Don’t Make Me Think” by Steve Krug (2006), this kind if design for the UI is the best, because the goal is to NOT make the user think. The website was also user friendly, and still brought me to the gallery whether I clicked on the picture or the corresponding button.

The work is apparently not finished yet for the Nelson Mandela Digital Archive Project and is, “a work in progress”, as their website says. Progressive is one characteristic of Nelson Mandela as he stands for social justice in South Africa. This innovation will continue long after his lifetime through the Nelson Mandela Digital Archive Project.

E-learning is a new model of education. It is now possible to learn languages, programming and even get complete degrees online.  Not unlike many users worldwide, I have done some Internet learning, and I feel that the complexity of learning interfaces is constantly increasing. Interface design tools play an important role in the development of online education.

One of the platforms I got familiar with included VoIP, screen-sharing, and many other interactive features.  For instance, it allowed students to highlight the words they were not familiar with. These words would then pop up on the teacher’s screen so he would know to explain them. At the end of the lesson every student would get a script and a video of the class. I found every bit of this model extremely efficient and enjoyable.

Interactivity and the ease of learning are probably the number-one requirements for e-learning applications. To design perfectly usable software takes a great deal of work. E-learning applications, more than any other applications, require intuitive user interfaces and therefore detailed planning and collaboration. Interface design tools help developers and teachers to unite efforts and come up with the most effective and creative teaching solutions. E-learning applications also need thorough user testing at different stages of user interface design. Some interface design tools offer user testing features and can help designers enhance the usability of learning platforms without extra expenditures for tools or specialized testing environments.

One could probably draw a parallel between the development of e-learning software and the development of interface design tools. Both are gradually becoming more complex and more efficient. Interface design tools help create learning interfaces which improve learning experiences in ways not available in traditional teaching. The times when teaching online involved calling on Skype and going through the same textbook are long over. Long live e-learning and the interface design tools that make e-learning applications more successful!

When it comes to user interface design, simplicity is very important. Any user interface design manual will underline that it is vital to keep things as simple as possible. Clearly, none of us wants to make a website deliberately complex. After all, we are interested in creating the user interface design that will allow our visitors to get what they want. Otherwise, they will just leave. But does making user interface design straightforward and functional mean making it simple?

As I was choosing a replacement for my broken phone I found myself looking at the latest smartphones. I do not listen to music on my phone, nor do I surf the Internet or play games. Yet I want to have a smart phone with a multitude of features that I will probably never use. This is typical of human nature: complexity adds to the perceived value, and while we might not use most features we would like to feel in control and know that we can use them if we want to. The same is true for the user interface design of any device or appliance.

I recently read an article about electronic products in South Korea. The author was impressed by the user interface design complexity of Korean devices compared to non-Korean. When he asked locals why Korean user interface design differed from European, they said that Koreans just like complexity. In Korea, complex user interface design means status. It is not so uncommon for a good Korean toaster to have an LCD display and a remote control. If you want to sell electronics in Korea, forget about simple user interface design.

It turns out that we actually enjoy having lots of different features on our devices. We don’t really want the simplest user interface design. We want the user interface design that is easy to understand and yet that makes us feel in control.

This fall Amazon impressed its customers with the release of a new product, Kindle Fire. This new generation device stepped out of the line of simple e-readers into the severely competitive world of touch screen tablets.

What does Fire’s user interface design have to offer compared to previous Kindles? The reviews of this hot product are controversial. Kindle Fire is based on a customized version of Android. At first glance, its user interface design is simple and straightforward. It is equipped with a standard on-screen keyboard, which pops up when needed. Navigation buttons are completely eliminated from the body of the device, and that helps keep its size at seven inches with the screen resolution of 1024 by 600. Fire’s user interface design is divided into categories, for example, Books, Video, Apps. It is possible to customize the elements of the user interface design to bring the most used applications forward as favorites. The most recently opened applications are shown in a carousel view. The number of applications available for Kindle Fire is still limited but it might change depending on its popularity.

Amazon Cloud, the important feature of the Amazon Kindle series, is also part of Fire’s user interface design. Amazon Cloud not only provides Kindle users with 5Gb of free online storage, but it also allows them to buy and rent books and films directly from the Amazon store. While dependency on Amazon seems like a drawback, it is a useful feature for those who shop at Amazon anyway.

Customer reviews on Amazon generally confirm high usability of Fire’s user interface design. Some complain, however, that it is not as functional as that of iPad. Indeed, Kindle Fire is mainly intended for e-book reading, mp3 and video playing, and limited web-browsing. It is hard to compare this to the unlimited possibilities of iPad but their price levels are not comparable either.

While Kindle Fire is not designed to be iPad’s competitor, simply because it has a different purpose and functionality, this Christmas many buyers will be debating whether it is best to get iPad or Kindle Fire.

There is no self-respecting PC manufacturer out there today that doesn’t boast at least one tablet among its inventory, or in the very least hasn’t announced plans to release one. Lenovo has just released the Android-running ThinkPad Tablet to complement it’s ThinkPad range of business-centric laptops. The product design of the tablet maintains the same look of the laptops although it isn’t as thin and light as, say, the Samsung Galaxy Tab 10.1 and the iPad 2. Uniquely the tab comes with a stylus pen ready to jot down notes, make annotations, or simply to sketch out ideas. In terms of user interface design the ThinkPad Tablet adds a couple UI design flourishes of its own onto that of Android Honeycomb. The most obvious is the user interface design of the homescreen, which features a Launcher widget in the middle with shortcuts to ‘Watch’, ‘Email’, ‘Listen’, ‘Read’, and a globe at the core which links to the web browser. This gives users, new ones particularly, quick access to arguably the most used functions on a tablet apart from video games.

What are some other user interface design flourishes of the Thinkpad Tablet?

Another user interface design novelty with regards to Android is the App Wheel. This can be activated by clicking on the icon at the center of the bar at the bottom of the homescreen’s user interface design. Doing this brings about a carousel-like wheel of a user’s favorite apps to the right of the user interface design. Other than that the user interface design is largely unchanged from Honeycomb, unlike the completely new user interface designs of the Amazon Kindle Fire or the GridOS. Arguably the most appealing part of the Thinkpad Tablet is that it comes pre-loaded with all manner of apps that makes this tablet a better all-rounder out-of-the-box than even the iPad. However there are a number of usability issues, such as poor AVI video playback, which hold it back from being an all out hit. Business users will be more than satisfied with the built-in apps, stylus and the extra ports.

One aspect of wireframing user interface designs that can easily be forgotten or underperformed is the creation of annotated wireframes. Annotated wireframes are, quite simply, wireframes of UI designs that feature notes and comments that clarify the user interface design. No matter how well made and clear wireframes of user interface designs might be, there is always a danger that biases or pre-concieved notions might affect a stakeholder’s judgment. One needs a thorough understanding of a wireframe in order to objectively understand a user interface design. This is even more true if the stakeholder viewing the wireframe is not well versed in the practices and principles of user experience and user interface design. Annotated wireframes are like the key to a map, while you can always look at a map without necessarily reading the key there are times when a key is necessary.

What is the best way to annotate wireframes of user interface designs?

Most wireframing tools today, be they online wireframe tools that can create clickable wireframes or a simple mock-up tool, have built-in functionality to add annotations to wireframes. However there are some things to consider when annotating wireframes of user interface designs as there comes a point when too many annotations can become counterproductive. It is crucial to keep annotations on wireframes concise. The more annotations put on wireframes the more noisy a user interface design becomes and this could become distracting. One of the ways of keeping annotations on wireframes concise is to always focus on the user benefits of the UI design elements. Clients who may not be well versed in user experience and user interface design practices will still appreciate knowing the benefits for users. If annotations are too numerous one could number them, ideally from left-to-right going down the user interface design to make understanding quicker and easier.

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?

This is the first part of my two-part blog post on psychological manipulation through the user interface design of e-commerce sites.

Psychological manipulation through design has long been a reality of the retail industry. Companies have long lavished high wages on psychologists and other professionals to figure out the best ways to get us to spend more of our money. Even if you don’t realize it a simple stroll through a supermarket will probably end up with you putting more in your shopping cart than was on your shopping list. In the same vein e-commerce sites also put just as much effort into their user interface design, so as to achieve a similar effect. In effect what they are trying to achieve through their user interface design is the justification of spending habits and getting users to feel better about their transactions.

What power does the default user interface design hold?

The default user interface design/ user experience is the UI design/ UX of a website or application that you see without you having had the chance to customize it. You can think of it as the clothes that might come with a doll from the box. According to usability guru Jakob Nielsen a large number of users will always stick to the default user interface design and settings. This “power of defaults” means that many of the customization features are untouched despite the fact that these settings could, and often do, improve the overall user experience/ user interface design. Conversely speaking the default user interface design and functionality has to be spot on. For a long time Amazon’s user interface design has been a UI design success story, constantly refined and perfected leading to increased sales. An example of the power of defaults effect on UI design that Nielsen gives is in filling in the country field of registration forms for one of his usability conferences. Instead of leaving the country field empty the location where a user is registering from can be used to, say, show the United States for someone registering from New York. The goal here is to obliterate the small frictions that get in the way of repeat purchases. One way sites like Amazon do this is to incentivize users to spend more to qualify for the omission of mental hurdle that is shipping costs!