Category — Interface Prototyping

Shortly after the iPad was launched Jakob Nielsen, the usability guru, released a study on the user interface design of the early iPad apps. His overall conclusion back then was that due to a lack of user interface design guidelines many apps had unique ways to wield them. A double-tap might do one thing in one app and quite another (if nothing at all) in another. As a result many users simply had to get lucky to truly understand the interactions that belie the various apps and their user interface designs. In all fairness it was more than just a lack of user interface design guidelines that was problematic but that developers only got their hands on the iPad at the same time as consumers, thus predicating a rush to ship apps.

A year later and Nielsen has revisited the user interface design of iPad apps. Naturally the user interface designs of iPad apps have improved but some findings are replicated in the new study.  The read-tap asymmetry still holds true. This is when text large enough to read is too small to tap thereby making the user interface design more frustrating. In the same vein touchable areas tended to be small and close to each other resulting in accidental activation. Navigation remains problematic though. Many users are not given enough indication of many of the tap-able links on the user interface design. The same goes for swipe-able areas whereby some users would swipe the wrong area and consider the app to be broken. On the positive side apps are now integrating back buttons, broader use of search, homepages, and other elements into their user interface designs. Considering how nascent the iPad is the signs are all-together promising.

Wireframing is an essential part of successful interface design processes. A great interface design does not just appear in one fell swoop. It comes about iteratively through constant refinement. It is about evolution and not revolution! This is where wireframing comes in handy through the traditional Graphical User Interface Design separation of “church and state”. This separation is the differentiation between an interface design’s content and its features, commands and other factors. With the latter, we are talking about layout, navigation, and other processes such as login and checkout. The idea behind wireframing is to test wireframes to ensure usability first, and only then worry about fleshing out the final aesthetics and content. Available to this end are various wireframing tools and the rest of this blog shall be dedicated to comparing a few of them.

The most rudimentary (and cheapest) way of creating wireframes is through the use of pen and paper. Some interface designers are also creating “paper wireframes” through PowerPoint, Fireworks, or Illustrator. Paper prototypes are cheap to create, and software allows you to easily add text, symbols, stencils, and the like as well as employing templates for even more rapid iteration. However, interactive wireframing tools possess the added advantage of interactivity, which opens doors for collaboration between team members and even clients. Furthermore, they engender feedback from all stakeholders and can even go as far as mimicking website functionality (such as clickable links etc.). Interactive wireframing tools usually allow for simple interface design by employing drag-and-drop of pre-fabricated UI components. This means that interface design can be done by virtually anyone without having to know coding. Wireframing tools can be web-based Software-as-a-Software or a native client that you install.
Examples of interactive wireframing tools include Axure, pidoco, Balsamiq and iRise. The wireframes can then be used in usability testing in order to be improved. Usability testing can be done with paper prototypes or digital prototypes.  Digital prototypes often require expensive specialized usability testing software such, but in rare cases (such as pidoco) does a wireframing tool also have the capability to conduct usability testing without the need for additional software.

According to the sleuths at Patently Apple, a blog dedicated to researching and postulating hypotheses based on patents filed by Apple, Apple has over the last couple of years filed several patents that strongly indicate the coming of the touchscreen iMac. Such a device would merge the iPhone’s touch-based interface design and capabilities with the iMac’s considerably larger screen size and processing power.

Along with images from patent applications unmistakably showing devices with user interfaces operated by the familiar touch screen technology, Engadget has reported that Sintek Photonics have been shipping Apple 20-plus-inch touch panels, which they have no doubt been experimenting with in the R&D department as future UIs of the next generation of computers. The question is will this concept, like scores of enticing concept cars, remain at the prototype level or will it actually evolve into a commercial product with an innovative combination of touch screen interface design and the familiar Apple features? Considering the iPad’s reality, the chances of interface design on desktops and laptops having to accommodate both the tiny mouse cursor and our thicker fingers seems all the more likely.

Certainly, the biggest clues to this possible iteration of user interface design of the Mac platform will be gleaned from the next version of Mac OS X. The more it borrows from or moves towards the mobile iOS will be most telling. A touchscreen iMac will have several implications for interface designs. Already the iPad’s screen size in relation to the iPhone has led Jakob Nielsen to comment, “An iPad user interface shouldn’t be a scaled up iPhone UI”. There is also the read-tap asymmetry where text big enough to read is too small to touch. This “fat finger” problem would only be exacerbated when jumping to the iMac’s screen size (which ranges from full HD to even more pixels). Apple would essentially have to revise long-standing Graphical User Interface Design guidelines to accommodate solutions to such problems. When or will a touch based Mac come out? Will it be practical for daily activities and business use? Only time will tell…

Palm, the fabled mobile devices company, released the original webOS to counter the threat coming from Apple’s iOS, RIM’s Blackberry and Google’s Android mobile platforms to name but a few. The tide had clearly shifted from hardware to software and although webOS 1.0 was roundly praised by critics for great functionality and interface design it failed to sell as anticipated, resulting in Palm almost going under. Until HP stepped in to acquire it for a tidy sum that is, largely on the strength of webOS.

The user interface design of webOS 2.0 is now cleaner due to some graphic elements being changed resulting in a more refined interface design that is also more legible. A good example of this is with the launcher and search apps (now dubbed Just Type). According to tech analyst Joshua Topolsky the launcher now has clearer navigational elements in its UI, and the search function now provides a “clearer delineation of sections” as well as more options that improve on the OS’ usability.

The overall navigation of the user interface design is improved with the introduction of Stacks as well as the aforementioned search app. The new Quick Actions API allows users to, for example, just type an intended status update in the search field and then through Quick Actions launch the Facebook app with all text transferred directly into the app’s UI. Stacks allows users to better organize their multitasking and overall navigation by grouping apps within the user interface. Users can create, for example, a social stack for social networking apps etc. Whatever you do in a stack that launches a new card, such as a new link or page, they remain grouped within that stack allowing users to easily navigate.

Options like these strengthen the notion that webOS is not merely trying to be a copycat of Apple’s iOS interface design features and functionality in a bid to play catch-up but instead focusing on innovating. As far as the software is concerned webOS is the underdog that matches and in some cases outdoes the competition. The goal for the company now would be to get as many developers on board as possible to take advantage of the OS and create apps with great UI designs and usability.

Digg, the social news-aggregation and recommendation site, recently re-launched as version 4.0 to a storm of controversy coming from a significant number of long-term users. Reworking and relaunching a website with a new user interface design is a delicate matter. Usually the goal behind such an overhaul of the UI design is to make it more attractive and easy to use for the website’s users. Often, changes are done iteratively to optimize the GUI. When done right consensus should be that the new interface design is a marked improvement and should lead to an uptake by new users. The fourth iteration of Digg’s user interface design takes a cue from Twitter and Facebook, something a number of social networks seem to be doing more and more of.  And with good reason too! The popularity of both websites cannot be put down to a mere fluke. These two websites are busy setting the pace as far as conventions on social networks go.

The revolt against the new interface design has already claimed casualties as Digg’s VP of engineering was fired. The biggest gripe users have with the new Digg, in terms of user interface design, is the lack of the ‘bury’ button. Now users can only ‘like’ a news story but cannot ‘bury’ it to make the news story less popular. The reasoning behind the lesion of the ‘bury’ button is that users abused the feature. Now users have the option to either report a story, should they find it offensive, or they can ‘hide’ a story. ‘Diggers’ became attached to the bury button and as such removing it was bound to backfire.

During the last year a new type of app has been popping up all over the mobile world.  These so-called “check-in” apps allow users to notify friends and colleagues about where they have been, where they are, or where they are going via their smartphone user interfaces.  App developers have also begun to use extant location-based social networks — such as Friendticker, Foursquare, MyTown, BrightLite, Gowalla and, most recently, Facebook Places — to create games, challenges, city guides and dating services all centered on user locations.
consumers.

The Samsung Galaxy tablet, set to hit the European consumer market in late autumn 2010, is the newest brave and ambitious challenger in tablet computer combat, a battlefield thus far dominated by the iPad, known for its easy-to-use user interface design and highly-praised usability.  The Galaxy is powered by Android and “consumers are able to experience PC-like web-browsing and enjoy all forms of multimedia content on the perfectly sized 7-inch display, wherever they go. Moreover, users can continuously communicate via e-mail, voice and video call, SMS/MMS or social network with the optimized user interface” (samsungmobile.com).   Since VoIP capacities are not supported by the iPad, it is clear that Samsung sees consolidating all possible features into one device as the best strategy for taking a bite out of Apple and gaining a competitive edge in the tablet computer mêlée.  In a metaphorical sense, this method of consolidation can be seen as a Chimera effect, the Chimera being a fire-breathing female monster of Greek mythology whose body was composed of parts from different animals.   The concept of amalgamating different features into one unified body creates a stronger and more fearsome monster.  The same could be true for the Galaxy as a technological competitor.  It remains to be seen how this consolidation will affect users in terms of the usability of the user interface design.

Color plays an integral role in our lives. Literally everything we see and do is painted in color.  Thus, the vitality and importance of color should not be forgotten when you are designing a user interface; in fact, the use of color can help distinguish your user interface from all the rest.  Using color in the right way can brighten up a drab interface design, increase its popularity with users and improve usability.  In order to use color, it is best to categorize how and why to use it.

Natural vs. Unnatural Colors

When thinking about your interface design’s color palette, it is a good idea to decide whether or not you want it to be inspired by natural colors or unnatural colors.  Natural colors are colors that occur in nature: browns, blues, greens etc.  Unnatural colors are colors that could appear in nature (most likely in a tropical rain forest) but are probably man-made or synthetic: fuchsia, hot purple, neon yellow, etc.  Put simply, earthen tones vs. bright, bold tones.

This is part one of a blog post analyzing the repercussions of the new iTunes’ Ping service in the music market.

If Facebook’s phenomenal success can be seen as a nail in MySpace’s under-construction coffin, Apple may have just hammered yet another one in. Despite being eclipsed in numbers by the former, MySpace continues to be doing well as far as the cocktail of music leveraging social networks is concerned. The newly released iTunes 10 has decided to leverage the number of Store accounts to muscle in this already crowded territory. This “social music discovery” network, called Ping, is arguably iTunes 10’s Unique Selling Point and is integrated right into iTunes’ user interface design. The feature allows anyone with an iTunes account to “follow” bands, friends and share suggestions

Ping has been described by Steve Jobs as “Facebook and Twitter meets iTunes.” Well not quite Mr. Jobs. At the moment Ping requires the latest version of iTunes, and an account, to run. Apple could have easily used Facebook and Twitter APIs into Ping’s interface design but clearly they prefer to be dictating terms and operating within walled gardens. A feature that Ping users will no doubt be clamoring for is a web-app version of the service. After all, what happens when wishing to access Ping from a computer, or mobile device, without the latest version of iTunes or none at all? Users would be faced with the seemingly arduous task of downloading, setting up and signing in. Way too much of a process for web surfers! In such a case services like Last.fm come up trumps allowing users to access the network through a number of platforms and interface designs. These range from web browsers, to mobile devices as well as stand-alone applications for Windows, Mac and Linux.

Usability is one of the foundation stones of UX design, but as a concept and a design method it does not come without limitations. One of the main complaints offered by critics against usability is its inability to inspire a deep sense of interest and desire within users relative to the employment of a particular interface design.  Of course the fact that a user interface is well organized and structured (in other words usable) usually makes it, in most cases, popular, but it is not usability design alone that compels users to seek out and maintain a relationship with a given interface design.  For that, designers are learning that there needs to be a certain level of enjoyment and fun for the user. The notion of using fun and enjoyment to compel users is encapsulated by the relatively new design concept desirability.