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.

With advances in mobile technology, travel apps are replacing the trusty guide book for many tourists. This allows them to save space in their luggage and update information on their holiday instantaneously, giving users up-to-date information on the latest exhibitions and travel information. If you are thinking about creating a travel app or updating your existing guidebook to a travel app, clickable wireframe software can be a useful tool. This can help you prototype the interactive elements of your app before you invest time in programming.

With clickable wireframe software, you can create prototypes that can be used to simulate an interactive application. You can use your prototype in usability testing to see how well people respond to your design concept. When you prototype your travel app with clickable wireframe software a good starting point is to think about is what your user may need. When you go traveling, you want information on your itinerary, transportation, currency, language, sites, and restaurants.

One of the great benefits of sketching mobile apps using clickable wireframe software is that you can experiment with interactive elements. This means with some types of clickable wireframe software, you can prototype interactive maps. The maps you prototype with clickable wireframe software can be used to show the best sites, restaurants, and theaters in the location you are creating an app for. You may choose to experiment with interactive features that can give your users information on the features in the map you prototype, such as audio clips or popup images and text. When you create a prototype of a travel app, think about your user and how they will use the app when they are on the go. This will help ensure that your users will want to use your app again on more holidays.

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!

Wireframing Software Overview

Wireframing software is used for website development, but have you ever wondered where the term wireframing software actually comes from?  Why is it “wireframing software” instead of, “spoke” software or “building blocks”? Your wireframe deer outside can probably help.

This short blog post will address a possible etymology of “wireframing software” (also wire-framing software) as an example of technological terms having their basis in the everyday world. We will first start with a dictionary definition of wireframing software then compare it’s function with a wireframe deer.

Wireframing Software in Dictionaries

To begin, we must break wireframing software into its individual words. Collins English Dictionary 10th Ed. (2009) defines Wireframe as “a visual representation of the structure of a web page” and Merriam-Websters dictionary does not even list the word. Neither dictionary yielded results for “wireframing software” or “wire-framing software”.  What is more interesting however is that the term “wireframe” is neglected, just like wireframing software, although it is perhaps key!

Wireframing Software and Your Wireframe Deer:

A “wire” is a bendable “string-like” metal and “to frame” is to put together the “skeletal structure of something, just as wireframing software can bend the “wires” of code to “frame” a website.  This may seem obvious and simplistic to compare wireframing software with a wireframe deer, but this explanation helps illustrate what wireframing software does, and that many “computer” terms, like wireframing software, actually may have roots in the physical.  Now, go talk to your deer, it might just tell you a little about “wireframing software”.

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.

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.

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.