wireframe website, wirframe, wireframes

User Interface Design in a Mercedes Benz

Posted on October 10, 2011 by admin

“I don’t want my life to stop when I enter my car”. User feedback from MB research.

Mercedes Benz has unveiled it’s sleek new “iPhone Interface Plus” at this year’s IAA Motor Show. The iPhone Interface Plus is a multimedia hub of sorts modeled on the previously unveiled Media Interface Plus accessory. Users can dock their iPhone in the glove compartment and use it through the larger screen in the dashboard by way of a free iPhone app. The user interface design is manipulated by a click-wheel like rotate-and-press mechanism similar to those seen on other up-scale manufacturers like Lexus, BMW, and Audi. This allows users to access their social networks, music, GPS and the like. Messages are read out aloud through text-to-speech to keep the driver’s eyes on the road. The rotary pushbutton can also be used to perform actions such as sharing current location or ‘liking’ the currently playing song.

What issues does the user interface design raise?

The user interface design of the dashboard screen is futuristic featuring all manners of graphics, transitions and science-fiction effects. Although initially impressive I found that in terms of usability these types of unnecessary user interface design elements distract from what is important. An example of this is how menu entries are hard to read due to graphical effects that blur the text somewhat. These effects provide no real practical purpose and add to the general noise. Despite these design quirks the user interface design is generally uncluttered in terms of content. A secondary, more nuanced, user interface design might have been a good option. Perhaps such a skin might be available in due time as a download. To complete the system rear passengers with an iPad can dock it into the crash-proof iPad Integration Plus docking stations ensuring no one’s life has to grind to a stand still when driving.

Posted in Wireframing Software, Wireframing Tool | Tagged , | Leave a comment

Advantages of Wireframe Software and Clickable Wireframes

Posted on October 1, 2011 by admin

When creating a website or a web app it is important to be able to quickly conceptualize possible user interface designs that can be used to communicate, refine, and test out ideas and concepts. This is where wireframing comes in to the development process. Wireframing is when prototype user interface designs of websites or applications are created, much like how car companies create prototype cars to, for example, test in wind tunnels. Wireframing UI designs goes as far back as the 80s, when graphical user interfaces were popularized by the Macintosh and Windows. Back then it was called paper prototyping as paper and pen was used to create wireframes of user interface designs. Over time the number of wireframing solutions increased as a number of GUI prototyping tools were released. Today one can still wireframe UI designs through paper prototyping but the functionality of wireframe software today is such that there is an opportunity cost involved of doing so.

What Are Some of the Opportunity Costs of Paper Prototyping Vis-a-vis Wireframe Tools?

One of the main issues concerning paper prototyping is that it is hard to re-use elements or edit wireframes after they’ve been hand drawn. Using a wireframe tool would be the equivalent of using MS Word to edit a letter rather than having to re-write it from scratch by hand due to a simple mistake, for example. Some wireframe tools even allow user interface designers to create clickable wireframes. Clickable wireframes are an invaluable form of wireframe that should be in any user interface designer’s arsenal. Clickable wireframes are wireframes that are interactive, hence they can be clicked and navigated like a website or application. This makes clickable wireframes much more effective for interaction design and usability testing than paper prototyping is. Coupled with an online wireframe tool these clickable wireframes can be shared through the cloud and, with some online wireframe tools, used for remote usability testing. A capable online wireframe tool that can create clickable wireframes is bound to speed the user interface design process, thus saving precious time and money.

Posted in Wireframe Tool, Wireframes, Wireframing Software | Tagged , | Leave a comment

User Interface Design Spotlight: Facebook’s New Navigation Bar

Posted on September 24, 2011 by admin

With Facebook’s annual f8 developers conference just days away speculation is rife that major announcements and changes will be coming our way in the next year. As usual there is always going to be the almost obligatory user interface design tweak. Two of the projects generating a lot of interest are Project Spartan and Project Titan. Project Titan is Facebook’s plan to create a unified inbox that combines messaging, IM, texting, and email into one user interface design.

The more mysterious and ambitious Project Spartan hasn’t even been officially confirmed but could have the biggest implications. The project is supposed to create a web app ecosystem for Facebook using HTML5. Gaming will most certainly be the vanguard of Project Spartan but as has been seen with Skype for Facebook other web apps will be bound to add functionality to Facebook’s clean user interface design. Naturally the fear is that with more and more functionality added Facebook’s user interface design could become more noisy. Yet Google+’s integration of a games tab has not impacted its usability negatively.

A new user interface design tweak that has been released before the conference kicks off is that the navigation bar is now omnipresent. The navigation bar now remains locked at the top of the user interface design no matter how far down you scroll, just like Twitter. This I think is one user interface design change that is sure to cause no outrage from disgruntled Facebookers. The navigation bar is so unintrusive it even takes up less of the user interface design than Twitters navigation bar. In many ways this user interface design tweak is a no-brainer as the navigation bar is central to smoothly using Facebook, at least more so than the aforementioned Twitter.

Posted in User Interface Design, Wireframe, Wireframe Software | Tagged , , | Leave a comment

Steve Jobs’ Legacy is Assured in Both Product & User Interface Design Part 3

Posted on September 16, 2011 by admin

These is the third part of a three-part blog post on Steve Job’s legacy on user interface design.

One of he buzz-words in the tech world today is the term ‘Post-PC’. This term, referred to at Microsoft as “PC-Plus” is used to describe our annexation of a number of devices into our computing needs previously met by standard Personal Computers. The argument of which term may be more correct may rage on, but both sides of the fence seem to agree on one thing: a bigger variety of devices, form factors, and user interface designs. In a sense what they mean is a blurring of lines between devices as more and more of our information is stored agnostically in the cloud. This debate would certainly not be raging without the triple-threat of iPod, iPhone, and iPad.

User Interface Design on the iPod & the iPhone

When the iPod was released it quickly became the phenomenon. It was simple to use and it featured a minimalistic and uncluttered user interface design that brought with it a certain elegance to MP3 players. If the iPod was a game changer then the iPhone was the biggest game changer of them all. The intuitive multi-touch natural user interface design of the iPhone was derided as an expensive gimmick that would only remain a niche product at best. Fast-forward to today and every major mobile phone manufacturer has a touchscreen smartphone with a link to an app store.

User Interface Design on the iPad

With the iPad, Apple built upon the natural user interface design of the iPhone and iPod Touch to re-invent the stagnant tablet PC. The uptake of the iPad accelerated speculation of merging operating systems that work across these various aforementioned form factors. This user interface design vision is already unfolding as we speak. The new version of Mac OS X already boasts features and other user interface design elements ported from iOS. Early screenshots of Windows 8 also point towards this type of future.

By being the captain of the ship when the products mentioned in these blog posts were being created Steve Jobs has left a user interface design legacy that is still being felt today. It will be interesting to see how Apple deals without their charismatic talisman of a CEO.

Posted in Ui Design, Ui Prototyping, User Interface Design | Tagged , , | Leave a comment

Steve Jobs’ Legacy is Assured in Both Product & User Interface Design Part 2

Posted on September 15, 2011 by admin

User Interface Design on the NeXT

After being ousted from Apple in 1985 Steve Jobs went on to found a new computer company called NeXT. Although NeXT computers had a reputation for being advanced they remained the preserve of higher education, research and business markets. In fact, it was on a NeXT computer at CERN that Tim Berners-Lee created the World Wide Web and published the very first website. Considering the fact that the very first HTML codes were created on the NeXTSTEP system Steve Job’s legacy on user interface design also extends to the internet. The NeXTSTEP operating system would go on to introduce user interface design concepts still used today. Some of these UI design concepts include real-time scrolling, system wide drag-and-drop, and window modification notifications. Other user interface design elements that were birthed on NeXTSTEP include the Dock and large full-color icons.

User Interface Design on the iMac

When Steve Jobs returned to Apple NeXT was absorbed in the process. In the wake of the iconic iMac Apple turned its attention towards creating a new UNIX operating system built on the foundations of NeXTSTEP. The user interface design of the Mac OS X saw the introduction of the cartoony Aqua theme, which is similar to the product design of the first iMac. The look and feel of this user interface design was copied by others prompting Apple to threaten lawsuits. Not all commentators were entirely pleased with the new user interface design as some considered it a case of taking a step backwards, in terms of usability. Prominent among them was Bruce Tognazzini, one of the founders of the Apple Human Interface Group, who ventured to equate some of the new user interface design experiments with the legendary disaster that was New Coke. His compelling argument was that Apple was turning it’s back on the professional market that had long championed Apple. As history has shown one characteristic of Steve Jobs’ leadership style was the ability to be willing to annoy 5,000 professionals to please 5,000,000 consumers.

Posted in Ui Design, Ui Prototyping, User Interface Design | Tagged , , | Leave a comment

Steve Jobs’ Legacy is Assured in Both Product & User Interface Design Part 1

Posted on September 14, 2011 by admin

Now that Steve Jobs has resigned as CEO of Apple the curtain has fallen on one of the most influential CEOs of all time. Both his tenures as Apple CEO have yielded products that have shaped product and user interface design. Surely a lot of the work was done by product and user interface design teams but Steve Job’s assertive perfectionism has been known to bring out the best in others, even through controversial autocratic tendencies. From the Apple II to the Macintosh during his first stint as Apple CEO to his NeXT computer company through to the iPod/ Phone/ Pad of his second stint milestones have been set each step along the way. In the rest of this blog post I shall look at some of the user interface design landmarks that occurred under Steve Jobs’ watch. The film Pirates of Silicon Valley chronicled the early days  that led to the founding of Apple and Microsoft and the battle of the graphical user interfaces.

User Interface Design on the Macintosh

Although the Apple Lisa featured a graphical user interface it was the Macintosh which became the first commercially successful PC to feature a GUI rather than a command line interface design, such as the Apple II. The underlying user interface design of the original Macintosh OS is still very much alive today on all major OSes from Windows to Linux and, of course, Mac OS X. Today we take the use of icons of real life objects as user interface design metaphors for granted but back then it was nothing short of revolutionary. In all fairness a lot of the credit must be given to the Xerox Alto which was the first to feature a GUI. I’m pretty sure a number of people at Xerox must rue the day the company practically handed its IP over to Apple because they couldn’t see the value in computers. And herein lies Steve Jobs at his best: the ability to envision “not where the puck was but where it will be”.

Posted in Ui Design, Ui Prototyping, User Interface Design | Tagged , , | Leave a comment

Amazon Tablet Spotted in the Wild

Posted on September 12, 2011 by admin

The rumors of Amazon’s entry in the tablet market have been fever pitch for some time now. While it was already known that the Amazon tablet would be running Android it has also been expected that this tablet could be the first to truly shake up the tablet space. Seeing that books have always been an Amazon specialty it has been speculated that the tablet could sport a dual LCD/ eInk display and be thoroughly integrated into the Amazon ecosystem. Respected tech news analysts TechCrunch were given the tablet to play with and although they were not allowed to show any pictures they nevertheless were able to put a lot of speculation to bed. The Amazon Kindle tablet features a full-color 7 inch back lit touchscreen, similar to the Blackberry PlayBook. The user interface design of the device has also been changed beyond recognition to reflect the Amazon and Kindle brands.

What Are Some of the User Interface Design Characteristics of the Kindle Tablet?

The user interface design of the Amazon tablet is said to feature an iTunes Cover Flow style carousel on the homescreen. This user interface design is perhaps indicative of Amazon’s conversion strategy and it’s positioning as media consumption device. Favorite items can be pinned below the main carousel for easy access on a dock, which disappears below the fold when using the device horizontally. Notifications appear on the status bar while the top bar shows the number of notifications. Tapping the screen once brings up a lower navigation menu which reminds me of the user interface design of the Kindle iOS and Android apps. The device is clearly designed to take advantage of Amazon’s cloud services with the reader being the Kindle app, the music player is the Cloud Player etc. However what could really be the clincher is the purported, and relatively low, $250 price.

Posted in User Interface Design, Wireframe, Wireframe Software, Wireframe Tool | Tagged , , | Leave a comment

Apple and the HTML5 Insurrection: A Revolution in User Interface Design Part 3

Posted on September 2, 2011 by admin

This is the first part of my three part blog post on how HTML5 will impact app development and user interface design.

Amazon is not the only company turning to HTML5 to circumvent Apple’s new 30% tax on in-app purchases and subscriptions. A number of newspapers and magazines, such as the Wall Street Journal and Fortune, have also launched their own web apps. However they also have decided to maintain a native app in the App Store. The Vudu video streaming service is a notable example of only having a web-app. Venture Capitalist and Rock Musician Roger McNamee outlines some of the advantages of HTML5 in the following keynote statement: “you can deliver a better experience than an app . . . without an app. HTML 5 is cheaper to build, cheaper to support, no 30 percent fee . . . oh, and the apps perform better, too”. What goes without saying is that this one web app would work on Windows, iPhone, Android and more all at once.

HTML5′s particular attraction is that it allows user interface designers to create websites that have the user interface design of apps. This certainly has the potential to take a bite out of Apple’s stock price projections once content creators and user interface designers find that HTML5 has advanced to a certain point. But for the time being complex apps and user interface designs will have to make do with native apps. Examples of these are Al Gore’s new book and Bjork’s new album. Both of these come in the form of ambitious apps that do things that HTML5 simply is not developed enough to do. Apple’s 30% tax on in app subscriptions has certainly bumped up the demand for HTML5 amongst developers and user interface designers. Firefox maker Mozilla has also launched  the ambitious WebAPI project with the goal of providing a basic HTML5 cross-platform phone experience within six months.

Posted in Interface Design Software, Interface Design Tool, User Interface Design | Tagged , , | Leave a comment

Apple and the HTML5 Insurrection: A Revolution in User Interface Design Part 2

Posted on September 1, 2011 by admin

This is the first part of my three part blog post on how HTML5 will impact app development and user interface design.

Some apps, such as Kindle decided to drop in-app links to the Amazon Store from the user interface design rather than cough up the extra 30% fee. However Amazon has shown that it has a trick up it’s sleeve by announcing the Cloud Reader web app with a user interface design that has different types of devices in mind. The user interface design of the app works well on a PC but it is truly optimized for the tablet. In terms of differences in user interface design the web app and native app are very much like peas in a pod. Thanks to HTML5 users can also read their books offline just like in the native app. However it must be noted that elements of the user interface design react slower in the Cloud Reader. Some features are also lacking such as the in-built dictionary and the ability to create and edit notes (though you can read already created notes).

The real focus of the Cloud Reader is, undoubtedly and unsurprisingly, the Kindle Store. It is after all the raison d’être of the app and it clearly shows. The web app has a better conversion strategy, for example, at the end of a sample chapter users can purchase the full version with one click. Now that the native app has no in-app links to the Kindle Store, users have to go to the Safari web browser to buy the full book then refresh the native app. The Kindle Store on the Cloud Reader actually features a better user interface design than Amazon’s usual Kindle Store. The user interface design features big finger-friendly buttons and a mainly two pane format that works similarly to the native iPad email client. The left pane of the user interface design is a list view of book titles (with thumbnail) and the much larger right pane shows titles in more detail. Once the aforementioned features are added to future iterations of Cloud Reader we might just start to see an exodus from the native iPad app.

Posted in Interface Design Tool, Interface Prototyping, User Interface Design | Tagged , , | Leave a comment

Apple and the HTML5 Insurrection: A Revolution in User Interface Design Part 1

Posted on August 31, 2011 by admin

This is the first part of my three part blog post on how HTML5 will impact app development and user interface design.

One of the most assertive yet curious stances that Apple took when it released the iPhone was to not support Adobe Flash. As of now a lot of Flash heavy websites have so many holes in the user interface design. Steve Jobs’ contentious argument, in a nutshell, was that Flash crashed far too much and that what one could do with Flash one could do with HTML5. This stance arguably roused developer interest and accelerated the road-map towards mass adoption of HTML5. As the saying goes one has to be careful what one wishes for lest one get it! Apple is well known for it’s walled-garden policies particularly regarding the iTunes/ App Store. It is this very vertical integration that has catapulted Apple into the world’s most valuable company in terms of market capitalization. There was an outcry when Apple announced that it would be taking 30% of subscription revenue in addition to the 30% it already takes when users buy an app.

On the one hand it can be argued that Apple spends a lot of money on the App Store and they have been successful in driving customers to spend money on apps en masse. It can only be natural for them to want a piece of the pie that they helped bake (excuse the pun). The other side of the coin is that a lot of companies now subjected to the new fee already operate on thin profit margins. And that’s not to mention the notoriously long and arbitrary review process required even for a minor update. For eBook readers, for example, that would also mean initiating the review process for each title! Yet the App Store, much like Walmart, simply cannot be ignored due to the vast amount of revenue generated. Or can it? A number of companies have already found ways to circumvent the new rules.

Posted in Interface Design, Interface Design Tool, User Interface Design | Tagged , , | Leave a comment