Category — user interface designing

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!

A prototyping tool is a software application that allows you to create a mockup of a web or software application. Prototyping tools can help you optimize your UI designs and help you focus on usability. Prototyping tools are especially useful when creating apps for tablet devices. While you may have already used a prototyping tool to create an iPad interface design, there are some important things to consider when using prototyping tools for Android tablet applications.

Prototyping tools and layout

With tablet devices, one of the great ways to use a prototyping tool is to optimize your user interface for both portrait and landscape. Because the user can switch between these two modes, it may be useful to find a prototyping tool that lets you view your prototypes on tablet devices. These prototyping tools will therefore allow you to see how your UI design will look in different layouts, so you can see where some of your elements may need to be repositioned.

Prototyping tools and usability

Prototyping tools can help you consider usability issues. When you use a prototyping tool to simulate UIs, remember that the Android user interface includes a system bar at the bottom of the screen. If you think that having interactive elements at the bottom of the screen will affect usability, you should use your prototyping tool to experiment with layout. Using a prototyping tool can often help you solve basic usability issues that may arise at an early stage. You can also use your prototyping tool to experiment with your interface design before implementation begins, thus avoiding late rework.

With prototyping tools, remember that usability is one of the most important aspects of any application. To ensure your application will be a success, use your prototyping tool to help you get the most out of the apps you create for Android tablet devices. Remember, the mockups you create with your prototyping tool should create an intuitive user experience.

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.

Last week Google posted in its official blog that a new user interface design was available for Gmail. It is still in a test mode, but the users that like it can switch to it immediately. The new user interface design can be accessed by clicking on the button in the bottom-right corner called “Switch to the new look”.

One of the important innovations of the new user interface design is advanced email search options. The drop down menu for these options is now located in the same window as the search itself. There, a user can refine his search by contact, folder, date etc. without having to go to a different window. This possibility seems to be a major improvement for the users that have a large number of emails and use the web interface for email.

Another improvement of the new user interface design is a neater conversation view. Google added a social element to the email threads: users can now see profile photos of the person they are corresponding with. This new look creates an atmosphere of instant messaging, where users can see clearly which person is writing what.

Furthermore, the new user interface design has more flexibility. Users can customize the side bar with labels and the chat area. All boxes can be resized by using arrow buttons and the chat window can be removed altogether by clicking the button in the lower left if the user does not need it.

Apart from that, Google introduced elastic density and a variety of new HD themes to the new user interface design. These features make Gmail more colorful and adjust spacing between elements automatically depending on the user device’s properties.

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.

“Mirror mirror on the wall which is the coolest user interface design of them all?” If the mirror I am referring to was paired with some speakers it could very well reply “verily the coolest user interface design in the land is mine”! What was once a magical concept from children’s stories could very well be coming to a bathroom near you. Thanks to the New York Times’ Research & Development group mirrors are the latest screen to join the user interface design bonanza. Technophobes might be quick to remark that in an ever more connected and faster moving world not even the venerable bathroom is safe. Now the time spent in the bathroom can be spent multitasking by, for example, brushing your teeth while reading emails etc. The mirror uses the Microsoft Kinect peripheral to detect the user and receive voice instructions.

The mirror also packs an RFID reader to recognize tagged pharmaceutical products and more for information. Naturally the prototype has been shown browsing through New York Times articles and video content. The user interface design of the mirror is reminiscent of augmented reality apps only that the information is overlaid on the mirror’s reflection rather than through a camera. One of the videos showcasing the product featured a user flipping through ties from his wardrobe. The only drawback I saw with this is whether people spend long enough in front of mirrors to justify reading an article, for example. However as part of an ecosystem it could prove invaluable. One could start surfing while brushing one’s teeth, to then pick up where one left off on a screen on one’s fridge, car, smartphone, office computer etc… Now that mirrors are resembling magical myths of ages gone by the question remains which is the next screen to join the user interface design bandwagon.