Category — waterfall design

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.

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.

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.

Benefits of waterfall design in user interface design

Because the waterfall design process happens sequentially it is a great method for user interface designers that are linear thinkers. More broadly speaking the waterfall design process helps UI designers in making sure that all components of a user interface design are  exhaustively conceived and analyzed. This way errors in a user interface design are also easier to spot as the waterfall design process moves along.

Problems with waterfall design in UI design

The saying goes that one’s biggest strength can also be one’s biggest weakness. The same can be said when using the waterfall design process to create user interface designs. The one way traffic inherent to the method can be a constraining way of creating user interface designs. The lack of flexibility can prove to be counter-intuitive for some user interface designers. Paying too much attention to the various steps can lead a UI designer to loose sight of the bigger picture. This can result in having to spend more time to go through the steps again in order to change things and solve other UI design and usability issues.

Waterfall design method lesson: know your team, know your method

The decision to use the waterfall method when developing a user interface design boils down to the makeup of your UI design team. For UI design teams that prefer to work in a more free-form way naturally the waterfall design process might be more problematic than for a UI design team that prefers to compartmentalize their workflow and work linearly. Knowing the psychological makeup of your team goes a long way in helping one determine the best user interface design methodology to use.

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.