More and more websites are developing innovative user interface designs.

This is the first part of my two-part blog post on persuasive design vis-a-vis user interface design.

What are Some of the Underlying Principles of Persuasive User Interface Design?

When incorporating persuasive design into a user interface design strategy it is important to keep a few underlying principles in mind, the first of which I briefly alluded to in the first part of this blog post:

• The first underlying principle is how the motivation and ability of a user determines whether or not they perform a specific task.
• The second underlying principle of persuasive user interface design is that user behavior can be classified in terms of duration and as either negative or positive.
• Using the behavioral sciences a user interface designer can derive insights used to augment the motivation or ability a user has when interacting with a UI design.
• Triggers (also called Call-to-Actions) are single user interface design elements that are added to a UI design to specifically increase the motivation and/ or ability of a user.
• The fifth underlying principle of persuasive user interface design is timing. Triggers have to be presented not only the right place in the UI design but also at the right time. Or in other words when a users motivation will have peaked, such as after putting items in a shopping cart a buy button would be ideal at this point in time.

What are Some Examples of Persuasive Design in User Interface Design?

An example of persuasive user interface design is how DropBox features triggers that call users to recommend the service to others and thus receive extra free storage. Other web apps such as Foursquare are taking gamification to heart by rewarding users points and more to use the service. Health and fitness apps, such as Nike+, are also including persuasive design to help keep users fitter. Persuasive user interface design is great when used to boost positive behavior. Conversely speaking persuasive user interface design can also be used to encourage negative behavior that can affect a user’s health, happiness or money.

This is the first part of my two-part blog post on persuasive design vis-a-vis user interface design.

As Graphical User Interface designs increased in sophistication, hand-in-hand with the increasing power of personal computers, new UI design techniques have been added along the way. In order to create better user interface designs strategies have been coined ranging from interaction design, information architecture, experience design and content strategy. At the beginning of the internet there were barely any user interface design conventions which led to a lot of websites suffering from poor usability. At the same time the internet was developing so fast that a lot of user interface designers simply had to improvise. Despite all the advances in user interface design, many websites todaystill suffer from poor usability despite the fact that web users are notoriously fickle with an attention span that can be measured in seconds. In today’s competitive landscape a user interface design should not only score well in terms of usability but it should also persuade users to come back again and again. This is particularly true with regards to e-commerce websites.

What Approach to User Interface Design Does Persuasive Design Take?

Persuasive design in user interface design refers to creating a user experience that seeks to impact a user’s attitude or behavior not through coercion but through persuasion. In a way persuasive design is akin to Soft Power in international relations, whereby the goal is to make users like (hopefully love) using your websites user interface design. Desireability is key here, building on top of a usable user interface design that has been made useful with the right content strategy. A user interface design can be made more desirable by focusing on the behavioral context of a user. What, for example, would be the motivation behind a user using a website? What would be the ability a user needs to adequately navigate a user interface design and complete tasks? Persuasive user interface design is more concerned with why users do what they do on a website whereby interaction design would be more concerned with how they do it. In the second part of this blog post I shall look at some examples and underlying principles of persuasive user interface design.

One of the biggest challenges facing the quasi-schizophrenic dual user interface design approach is that developers and UI designers will have to go back to the drawing board. The user interface design of standard Windows apps is simply not optimized for tablets. However, more and more popular websites are releasing tablet-friendly UI designs and this trend could spread to stand alone apps as well. The latest iteration of Mac OS X already points to this direction with its full screen mode. For example, the user interface design of iPhoto ‘11 in full-screen mode running on the iPad via remote screen sharing looks like an iPad app and could theoretically be touch-enabled.

Getting the user interface design of apps to work across both UI designs is just one challenge. There is another technical challenge facing developers and that is whether Windows 8 is running on Intel x86 or ARM-based processors. ARM-based processors have a much lower power consumption which is why they run most smartphones and tablets. This is already evident in the upcoming Internet Explorer 10 which will come in two flavors with a plug-in free (read Flash-free) version for Metro. An interesting piece in The Guardian likened Metro to a kind of overarching meta-app effectively rendering other apps as functionality extended plugins. Metro has such a distinct user interface design that it is hard to tell where one app starts and the other ends.

This seamlessness is bound to create a more unified user experience but could also, on the other hand, make it harder for developers and user interface designers to stand out from the crowd. When it comes to usability, conventions are there to be followed. The “über-application” approach of Metro could mean avoiding the usability pitfalls of the first iPad apps (such as low discoverability, read-tap asymmetry and accidental activation). Of course a lot still remains to be seen as to how apps optimized for the Metro UI design will pan out but Microsoft have positioned themselves in a strong position to offer Apple some competition.

Microsoft finally pulled the curtains off Windows 8 at the recently concluded BUILD Conference. As was heavily speculated the upcoming OS features a dual-mode user interface design. Effectively what Microsoft has done is to merge two operating systems, one for desktops and another for tablets. When Microsoft released Windows Phone 7 I felt its user interface design would even work better on the larger screen size of tablets. All the while Android (namely Honeycomb), webOS, and Blackberry’s QNX were all optimized for tablets in the wake of the iPad. Now it is clear that Microsoft is eyeing a mutually beneficial symbiotic relationship between the two user interface design modes. Despite PC sales slowing down Microsoft can almost be certain of shipping a high volume of Windows 8 when it ships.

Microsoft seems to be taking a leap of faith as the tablet optimized user interface design is touch friendly. Yet most Windows users do not possess a touchscreen so unless they opt to buy a Windows tablet they would need to buy a touch-enabled display to use this functionality. There is also the ergonomic factor of having to lift your hands, which I imagine could quickly become annoying. There is also the smudges and fingerprints taking over the screen to consider. However that is precisely what the user interface design of the Windows 8 Start menu seduces you into doing. Clicking on the Start menu now opens up the Windows Phone 7 like “Metro” UI design. Switch back to the traditional Desktop user interface design and not much has changed from Windows 7, apart from the introduction of the Ribbon UI to the Windows Explorer.

There are some things that Metro does better than iOS. A good example of this is moving an app to a desired location on the user interface design. On iOS one has to laboriously drag the app icon from page to page whereas on Metro one can activate a tile for moving, hold it down and use another finger to smoothly swipe through. The tiles themselves are bigger and can thus be used to display widget like information which is a great example of beautiful yet practical user interface design. iOS apps on the other hand are represented by static tiny icons whose added functionality is the number of notifications available.

Linux is usually the first thought that comes to mind when one thinks of a free and legal operating system. For a lot of consumers one might even be able to switch the word Linux with Ubuntu, the popular Linux distribution. Despite the strengths of Unix-based OS and modern user interface design one of the major drawbacks of Linux has been the dearth of software options, at least relative to Windows and Mac OS. However both of these options cost, if one intends on procuring them legally!

The ReactOS, one could say, is effectively the lovechild of Linux and Windows. It is open source, like Linux, but is a re-write of the Windows kernel. The project effectively began in 1996 at a time when Linux didn’t have user-friendly distributions like Ubuntu (and, it must be noted, a much less complex iteration of Windows). The project, lacking a Mark Shuttleworth type benefactor like Ubuntu, is still only an alpha release though plans are underfoot for a beta release within a couple more iterative design cycles.

In terms of user interface design the ReactOS looks like Windows 2000 with a sprinkling of UI design elements ported over from Linux (such as icons). This makes it immediately accessible to most users who are already familiar with the functionality and user interface design of the Windows operating system. I’d even venture to say that to many a user the UI design would be indistinguishable from an earlier version of Windows, particularly now that Windows XP, Vista and 7 are out there.

As a Mac user I will be following up on ReactOS if only to activate the dual-boot functionality of Mac OS X without having to fork over a wad of cash for a Windows license proper.

Reading tech news of late gives one the impression that the PC is going the way of the dodo. “Post-PC” has become a buzzword to describe this current computing zeitgeist that we are supposedly in. Computer manufacturers themselves seem to be throwing the towel as HP, the world’s biggest PC manufacturer, announced it was following IBM’s lead and exiting the consumer PC business altogether. The suggestion seems to be that the PC industry might have peaked and that there is not much more in the way of innovation, both in terms of hardware and user interface design. Buy a Dell, an HP, or a Samsung laptop and chances are that there is not much separating them. As some players leave the PC business others are keen to enter it. Razer, the computer peripherals maker, has announced what they are calling the world’s first true gaming laptop. The likes of Alienware, Origin, and the discontinued, HP-owned, VoodooPC may take offense at that statement but then again the Razer laptop truly brings something new to the table. Gaming PCs till now have tended to be specced up versions of standard PCs albeit with fancy casing.

Already from the outset the Razer Blade laptop takes an uncompromising approach by being 0.88 inches thin where most gaming laptops are bulky. The touchpad is also placed conveniently to the right of the keyboard, which makes better ergonomic sense than the standard touchpad-below-keypad configuration. Although this may not be much of an issue during every day computing but is crucial for usability when it comes to gaming. The trackpad itself is also very novel, particularly with regards to user interface design. I know I can see the thought bubble forming in your head wondering what user interface design has to do with a touchpad? And surely the ergonomic advantages can’t change the user interface design of the laptop? What is novel is that the touchpad is a touchscreen featuring a custom user interface design. The Switchblade UI is a customizable “all-new innovative user interface designed from the ground up to make your gaming experience more efficient, intuitive, and exciting”. Above the multi-touch panel are 10 dynamic buttons that can be set to shortcuts etc. The possibilities of the Switchblade UI are endless and would be a welcome addition on any laptop.

To date, the iPad has had no trouble pounding its tablet competitors into submission, sometimes  even extinction.  The most recent evidence of this phenomenon is the demise of Hewlett Packard’s webOS Touchpad, a mere seven weeks after its release. The webOS flop, despite critical acclaim for its user interface design and functionality, was an embarrassment to Hewlett-Packard, and it has left many wondering if there will ever be a viable tablet that can take on the iPad.

Speculations as to why the iPad reigns supreme over the tablet kingdom vary, but many suspect that the iPad’s success has more to do with Apple’s loyal fan base than with the superiority of its functionality or user interface design.  Apple has the uncanny ability to capitalize on its rabid base of users’ undying willingness to eat up any dish the company serves, tablets included. On the other end of the spectrum, many believe that PC users still fail to see the point of a tablet when they already have a laptop and a Smartphone. This failure of the user to identify the tablet’s importance creates a kind of tablet gap, a dark void in which companies try to solve the PC user’s tablet-related existential crisis with various tablets to no avail. Designers stuck in the tablet gap seem more adept at churning out products that PC users just don’t want to buy.

The void created by the tablet gap has become a thorn in the side of Apple’s competitors, but Google may have found a legitimate solution to the problem. In tandem with its moves to buy Motorola Mobility, a hardware manufacturer, it is rumored that Google will also be releasing its Ice Cream Sandwich iteration of Android as early as this fall. If the rumors prove to be true, the one two punch of new software plus hardware manufacturing capabilities just might be the missing link between the Smartphone and the laptop that Apple competitors (and PC users alike) have been looking for.

The Ice Cream Sandwich platform is a follow-up to the Android platform and will allegedly unify the Android Gingerbread user interface design (available on Smartphones) and the Android Honeycomb user interface design (available for tablets) in order to make the features of all platforms available on all devices, a multitasking, multi-interfacing interface. Consequently, PC users may be able to see the benefit of a tablet that runs the Ice Cream Sandwich update, opening themselves up to the idea that tablets can be useful and functional, not just frivolous. If Google can create the right tablet hardware to case this software ice cream dream, they may be able to take a big chomp out of Apple. The tablet world could get a whole lot more interesting in the coming months.

Like the Shalamar song goes the second time around is always better than the first time. This is the same message that Fusion Garage has been sending out after announcing their comeback into the mobile devices space. Their first foray had the company rushing to beat the iPad to be the first to market with the JooJoo web-only tablet. The JooJoo is widely considered to have been a let-down, which is a contention that even the company’s CEO agrees with. While the JooJoo was discontinued the iPad went on to become a run away success with Android tablets joining in the party trying to grab a slice of the tablet pie.  Meanwhile the company doubled-down, took their hard-earned lessons and plotted a Hollywood style comeback. The result is a three pronged attack in the shape of the Grid OS, Grid 10 tablet, and the Grid 4 smartphone. All three products are intended to work with each other seamlessly with users switching back and forth between devices and picking up where they left off.

The new Grid OS is based on the Android kernel but features a unique user interface design and several unique features.  The user interface design of the Grid OS  is divided, unsurprisingly, into grids that can be manipulated. Apps fit into a grid and placing them right next to each other allows you to group them together. This has even better usability than grouping apps in iOS which requires opening a folder to peak in. On the Grid OS you see them from the get go. Also unlike all other major mobile device OSes the user interface design of the Grid OS homepage features a video game style map UI design.  Rather than switching from page to page to access other apps you simply move directionally to reveal other apps. A handy mini-map on the top right of the screen allows you to jump to a particular point of the homescreen. The OS also provides contextual options, or “predictive technology”, through wheel-like user interface design that appears when clicked. Excuse the pun but talk about re-inventing the wheel. While the OS is very new it can run Android apps  and because of this the Grid 10 is immediately appealing to any prospective tablet owner who wants an alternative to the iPad.

Adobe has now released the public beta of its ambitious web and user interface design application Muse. To be fair graphic design software would be more apt but Muse is clearly intended for the creation of web sites. The basic premise of Muse is as a web and user interface design tool that works like InDesign, Photoshop, and Illustrator from the flagship Creative Suite tools. The main difference is that Muse will not be available to buy but as Software-as-a-Service for a monthly fee. With Muse users can create user interface designs by combining graphics, text, and other user interface design elements using the workflows of desktop publishing.

Not having to code the user interface design is an appealing factor. Muse is obviously directed towards graphic designers and one glance at the websites so far made with the tool seems to confirm this. Many feature lean and clean user interface designs showcasing artistic and creative work but there are a few for small businesses too. The question remains whether Muse can be used to create larger more complex websites, such as an e-commerce website. Muse for example doesn’t have a real content management system, which is what essentially brings a user interface design of a website to life.

Muse runs with Adobe AIR and is therefore not a native app. This means that it can run on Mac and Windows but it also makes it light with minimal footprint. The user interface design of the app itself is very much like InDesign. In fact the user interface design team was the same one behind InDesign. To tool is slated to be released in early 2012 so there is plenty of time for feedback to further improve it

What are some pitfalls of skeuomorphic user interface design?

As we saw in the first blog post the skeuomorphic user interface design paradigm lends itself pretty well to mobile devices that support multi-touch input such as tablets. However skeuomorphic UI designs can effectively throttle the usability of an application. Going back to the example of Calculator applications from the first part of this blog post, functionality is limited due to the user interface design. Due to the small calculator screen UI design one cannot see the entire calculation.  Surely it would be more usable to see all steps at a glance as well and to be able to jump right in to a desired step and edit just like how one would in Microsoft Word.  Also mentioned in the first part of this blog post was the skeuomorphic user interface design of QuickTime 4.0 and the addition of a volume dial into the UI design. A volume dial feels great on a Walkman in the palm of your hand but operating one with a mouse is odd. Furthermore the visible part of the dial is small making it even more cumbersome to get too.

Further pitfalls of skeuomorphic user interface design?

When Apple  announced the new Mac OS X they mentioned they would be bringing over lessons learned from the iPad. Clearly one of the things they had in mind to bring over was more skeuomorphic user interface design. This sparked heated debate in the blogosphere of whether Apple was indeed taking one step forward and two steps back with some of the UI designs, particularly those of the new iCal and Address Book. The iCal app’s new user interface design is made to look like an actual calendar but features UI design elements that have been criticized as being unnecessary at the best and distracting at the worst. An example of this is with the faux stitching which adds to the noise of the user interface design without providing any additional purpose or functionality. Clearly the stitching is not holding the calendar together! The Address Book on the other hand does away with the functional three-pane view UI design that was easier to navigate in favor of the look of a book. The problem with this is that while it looks like a book you cannot browse like a book. This only serves to disorient and alienate users. Skeuomorphic user interface designs when employed should work as the UI design suggests.