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?

According to BBC News, nearly 50% of people using the internet are using it on mobile devices. These statistics are from 2011 and this number has been increasing ever since. Many e-commerce, entertainment, and other websites are adapting their user interface designs to meet the needs of mobile users. With nearly half the population browsing the internet on mobile devices, the importance of mobile-friendly user interface designs cannot be overestimated.

One of the noticeable changes in the user interface design of familiar websites is the disappearance of the vertical scroll-bar. Whether or not this change has happened for the benefit of user experience is yet to be seen. Since the majority of mobile devices with access to the internet are touch-screen, the user can scroll text by moving a finger across the screen. Touch-screen user interfaces allow users to scroll the text itself without a scroll bar. Another possibility that mobile user interface design offers is the resizing of a window by touching the screen with two fingers at the same time.

I personally find the touch-screen user interface very handy for quick email checks, but whenever I have a chance to sit down at a computer with a mouse, I much prefer the traditional and familiar user interface design, which I cannot imagine without scroll-bars. In my view, user-friendly and intuitive user interface design often makes applications seem familiar and easy to use. The scroll-bar has been part of website interfaces for many years now and there are hardly any users who do not know how to use one. In fact, the scroll-bar has a number of benefits for the user interface design of applications. The main one is that it helps users adjust the content to fit the size of different windows and screens. Using a scroll-bar can be much more convenient than the scroll-button on a mouse. For one, I find scroll-bars convenient and user-friendly and I hope that they will not disappear from user interface design in the future.

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!

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.

Welcome to the second part of my two part blog post on using Niehaus wireframes in UI design.

As we saw in the first part of this blog post Niehaus wireframes are wireframes that are built with a conversion strategy in them. They thus point out which parts of the user interface design are more relevant in terms of return on investment.  The creation of Niehaus wireframes entails three wireframing stages: namely the Pareto wireframe, Niehaus wireframe, and Storyboard wireframe stages.

Stage 1: Create a Pareto Wireframe

The Pareto principle (also known as the 80/ 20 rule) is key to the Niehaus wireframe process. In this instance the wisdom goes as follows: 80% of all the potential conversion of a user interface design can be achieved simply implementing 20% of the possible UI design solutions. In order to help determine which solutions fall into this 20% target audience profiles are created. These profiles help determine which segment of the target audience is more likely to actually convert into a paying customer. Armed with these profiles a Pareto wireframe is created. This is a type of wireframe where a user interface design is divided into segments and given value creation scores for the different profiles. In the end relevance and focus is given to 20% of the user interface design elements that are most likely to bring in 80% of the market.

Stage 2: Creating a Niehaus Wireframe

This stage distinguishes the Niehaus wireframe technique. The importance of user interface design elements is distinguished by gray scale color coding with the darkest color reserved for the most important UI design elements. Niehaus wireframes typically have four levels of gray scale starting with light gray. Light gray elements tend to comprise around 60% of a user interface design and include things like the logo/ site ID and main navigation. Tertiary focus is given to elements with a mid-gray color which make up around 30%. Secondary focus is given to dark gray elements. These tend to make up 8% of elements on a user interface design and should provide a justifiable conversion contribution such as leading to the primary focus. Black would be used to denote the primary focus such as a Call-to-Action. Black elements would typically comprise 2% of the Niehaus wireframe. It is important to remember that these percentages depend on the target audience, context of a web page, page type etc.

Stage 3: Create a Storyboard Wireframes

The storyboard wireframe is more like a classic high fidelity wireframe. The main difference with storyboard wireframes is that they feature actual detailed content of a website whereas classic wireframes often make do with placeholders. The real content here is used to accurately measure whether all elements of a user interface design work in unison to deliver the conversion desired.

What makes Niehaus wireframes particularly appealing is that they give attention to relevant user interface design elements and make it clear for all what they may be. Due to the nature of the wireframing process user interface designers get to incorporate a conversion strategy in their wireframes.

Welcome to the first part of my two part blog post on using Niehaus wireframes in UI design.

Wireframes have long been a useful tool in the creation of user interface designs for software applications and, later on, websites. In the beginning wireframes of user interface designs were created by hand with paper and pen in a technique known as paper prototyping. One of the ways of looking at wireframes is as blueprint plans that user interface designers use to achieve their goals. In other words they are visual guides that show the navigation, layout and other elements that comprise a user interface design. But just like blueprint plans, wireframes haven’t changed much. The area where wireframes have changed, though, has been in the way they are created and presented. Considering that paper prototyping started in the mid 80s then these innovations are perhaps not as surprising because computers have changed so much since then.

Paper prototyping still is the simplest and quickest way of creating wireframes of user interface designs and therefore very accessible. Today, however, user interface designers have the option of using wireframing software to create wireframes enabling them to modify and elaborate them as UI design progresses. The various wireframe software out there provide a number of advantages over the more traditional paper prototyping. For starters wireframes that are created digitally can be saved and iteratively developed. This also opened the door for UI design teams to be able to collaborate on creating wireframes. Some wireframe tools have even enabled true GUI prototyping. This is when the wireframes are not just static images but they can also simulate use cases and thus behave like a website or application. With the ubiquity of broadband internet connections some online wireframe tools would even work through the magic of the cloud requiring nothing but a modern web browser.

In order to create wireframes  that go beyond simply depicting the make up of a user interface design, Sandra Niehaus presented  a new wireframing concept at the Conversion Conference. As the name of the conference suggests a key concern of Niehaus wireframes is how to convert potential customers into paying customers through meaningful user interface design. Classic wireframes have three fundamental weaknesses, according to her. These are relevance, focus and conversion strategy. Wireframes created using her technique go further than  just displaying  the structure. These types of wireframes are now referred to as Niehaus wireframes in her honor. Join me for the second part of this blog where I shall go into how to create Niehaus wireframes.

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 extreme programming?

Extreme programming is a way of quickly iterating applications while still taking user feedback into account. It is a type of agile software development and as such is based on shorter development cycles that incorporates UX/ UI design feedback into new iterations that are released more frequently. In effect what extreme programming does is to combine and speed up the best UX/ UI design methods, hence the use of the word extreme.  Extreme programming is a synergistic collaborative process that brings together user interface designers in a win-win situation.

The four basic phases of extreme programming in UX/ UI design

There are four basic phases in the extreme programming process which a UX/ UI design team can implement whichever way suits them best. Coding is considered the cornerstone of extreme programming because after all the wireframing and prototyping a user interface design needs to be coded or there is no product. Testing is another phase where the kinks are ironed out of the user interface design to ensure quality. Listening to customer’s needs and designing are the other two phases.  These phases must be done with the following five values in mind: simplicity, communication, respect, courage, and feedback.

More on the values of extreme programming in user interface design

Communication here refers to the UI design team more than the users. When rapidly creating iterations it is important to provide adequate documentation to the user interface design team to engender a shared view of what requirements the system needs to fulfill. Simplicity is ensured by encouraging user interface designers to provide simple solutions first before worrying about adequate functionality. The feedback loops created during the UI design process are great ways of making the shorter development cycles work. Keep in mind that feedback here comes from customers, the UI design team, and the system itself. Rounding off these values are the courage it takes to quickly iterate for today and not tomorrow as well as respect for users, the team and the system.