Category — user interface tools

Many app designers use wireframe software to create prototypes of apps for tablets and smartphones. Some believe that using wireframe software fosters creativity. By creating a prototype with wireframe software, designers have the freedom to experiment with their ideas before the programming stage of development begins. Wireframe software can be particularly useful for designers who want to draft interface designs in a field where there are not many previous apps to take inspiration from. One new area that companies are investing in is ‘second screen apps’. What does this mean? While we may watch TV while browsing on our laptops or smartphones, companies want to gain our attention through both screens. Creating apps that enhance the viewing experience can be a way for advertisers to achieve this.

The trick is to create an app that viewers will enjoy, that will also not distract too much from the program they are watching. Wireframe software is being used by some developers to draft smartphone and tablet applications quickly and at reduced cost. An app designer could use wireframe software to create a prototype of an app that gives bonus information about the television show, or even draft a game that can be used to play along with a TV show. A social media app that enables viewers to comment on shows could also be something designers might want to draft with wireframe software. As this is a relatively new field, there is a wide potential for apps to create. With wireframe software, designers and other stakeholders can be creative in the apps that they draft, which can help lead to a product that viewers and advertisers will love.

The e-book market is growing and the demand for online newspapers and magazines with it. Users can access articles instantly, making them more appealing to people on the go. Many magazine and book publishers would like to tap into the app market, but creating apps for these products can be more difficult than it seems, due to the challenge of transforming a vast amount of content into one application. Many designers use prototyping software to sketch out wireframes for web and mobile applications and this can also be useful for applications that have a lot of text content.

One of the challenges of creating apps for newspapers and magazines is that it can be difficult to organize information in a way that seems logical to the reader. While a newspaper has different sections, such as current affairs, international affairs, sport and comment, it can be interesting to experiment with how the information within these sections is organized and whether some articles should feature in more than one category. The home page of a mobile app is also important and prototyping software can be used to sketch out where different content should be positioned. With many types of prototyping software, you can use different sized headlines and edit text. You can even add text boxes and images with many types of prototyping software. If you are thinking of transforming an existing magazine or newspaper to a mobile app, I would strongly recommend taking an existing edition of your magazine and using prototyping software to upload the existing images and headlines. Even if you decide to use image holders, rather than the images themselves, this will give you an idea of the structure of your final application. With prototyping software, you can create professional-looking wireframes that can help you visually structure the content of your application. You can then show these wireframes to end-users for feedback to ensure that your app meets the expectations of your users.

In this blog post inspired by usability guru Jakob Nielsen’s newsletter I shall talk about the importance of using screen real estate when creating user interface designs for mobile devices. The user interface design arguments presented here  also apply (in various degrees) to desktops but for the purpose of this blog post I shall focus more on UI design for mobile devices.  The basis for the newsletter was an 8 year old study that found websites used only 40% of the user interface design on navigation and content of interest. Despite monitors increasing in resolution, size, and cheapness a number of user interface designers still don’t take advantage of the extra screen space. An example of this is how certain websites  open important features in tiny pop-ups that necessitate scrolling and generally add noise to the user interface design.

To provide concrete UI design examples, the report gives  the example of the ABC News iPad app. The user interface design of the ABC News app’s default home screen features a globe. At first the globe is interesting because users can spin the “world” to see what stories are making the world go round (excuse the pun). In the long run it becomes annoying as the user interface design means only one story is visible at one time. Users turn to the alternate home screen user interface design as soon as they find out how to. In short, the best way for UI designers to not waste screen space is by creating user interface designs with higher information density. This approach to UI design increases the chances of users seeing the content they want and thereby scrolling around less. However, care must also be taken to not cram the user interface design with too much information that it becomes overwhelming.

One of the hallmarks of Craigslist, the classifieds website, has been its almost unchanging and unwavering user interface design. Due to its very un-Web 2.0 user interface design the website looks like it’s a dinosaur from the World Wide Web’s earlier days. Craigslist, however, is a survivor and remains popular with 20 billion monthly page views. Even though the old adage goes “if it ain’t broken don’t fix it”, the user interface design has moved on. Surely there are a number of things Craigslist could do to improve the usability of its user interface design without alienating its user base. Navigation and search, in particular, are areas that could do with a makeover. However if Craigslist is planning a change to its user interface design they aren’t letting Joe Public know.

In the meantime those looking forward to an updated Craigslist user interface design will have to settle for Craiggers. What Craiggers does is to simply present Craigslist data in modern user interface design using the 3taps API. Navigating the user interface design is made easier by a three-column interface design with a search bar and utilities at the very top. The left column is used for the main navigation using collapsible lists of Craigslist categories.  The center and right columns of the user interface design are used to display the content of the classified ads. The center column shows a detailed list while the right column displays the ad in full. This way you no longer have to hit the back and forth buttons, or open ads in another tab. Searches can be saved so that you can return to them to, for example, see if there are new job postings. Users can also sign into Craiggers with their Facebook, Twitter or Google accounts. The only downer, at least for me,  was that Craiggers was only compatible with classifieds from the USA.

In a bid to stay ahead of the curve Yahoo Mail has rolled out the Beta version of its new user interface design. When Microsoft revamped the user interface design of its Hotmail service it also set its eyes on poaching Yahoo mail clients. To this end Microsoft even has a website specifically to convince users that the new Hotmail user interface design trumps Yahoo Mail in every way. Complete with a live ticker counting how many people “have signed up for the new Hotmail” and complaints from “ex-Yahoo! Mail users” the website shows top reasons why Hotmail and its revamped user interface design is the best thing since sliced bread. The new Yahoo Mail Beta features a cleaner and prettier user interface design. The tabs, and buttons in general, are bigger and clearer making easier to use and navigate the user interface design. Naturally social networks are integrated in a bid to keep users further glued to the webmail service.

The previously separate mail search and web search have been unified into a single search box  at the top right of the user interface design. This part of the user interface design is conventionally used for web searches and so to make it clearer the search box features two large buttons for mail and web searches. The attention to detail is evident as the Search Web button’s color always blends with the background theme color while the Search mail features a distinct yellow color. Narrowing search results is also better as the right of the user interface design offers you the chance to narrow searches based on sender, attachment file type, folder, or read and flagged status. Photo attachments can be viewed in a slick Slideshow user interface design whereas Youtube videos are now embedded into a mail. Changes to the user interface design like this are welcome and they ensure the webmail war is far from over.

When Nokia and Intel became the main partners in synthesizing Maemo and Moblin into MeeGo, the intention was to create a robust OS that could work on a number of devices. At the Intel Developers Forum in Beijing an array of tablets sported the user interface design of the MeeGo OS. Details of the user interface are scant indeed as the MeeGo website showcases all major device types but tablets! However, hands on videos indicate that MeeGo is the baby that Nokia seemingly threw out with the bath water. The web video I saw showcased a no name brand tablet. The idea of Nokia adding the same type of refinement to the hardware and user interface design of a MeeGo tablet as it has with the N9 seems like a no brainer. But alas, Nokia seems to be vested in primarily partnering with Microsoft.

Although tablets seem to have swept the rug from under the netbook’s feet I found the user interface design of MeeGo for netbooks very appealing. So much so that I was somewhat disappointed that the user interface design seen in the video wasn’t closer to the netbook version of MeeGo. The dividing of the user interface design into zones makes sense and this is also well executed on the tiled user interface design of Windows Phone 7. The bar at the top of the user interface design could even be kept pretty much as is for quick easy access. This could even work better than on the user interface design of WP7 or iOS for that matter because,for example, you could just jump straight into the desired zone without having to go back first. That would also leave space for widgets or apps to populate the rest of the user interface design.

After a long wait drawn-out for an update Windows Phone 7 is finally here. While further accentuating the much lauded tiled user interface design, Mango boasts a reported “500” new features! It seems the wait has been worth it as the update iteratively evolves the user interface design of Windows Phone 7 to present a seriously compelling challenge and alternative to Android and iOS. I would even go as far as saying that should Microsoft put as much effort and time into the usability and user interface design of Windows 8 as they have for Windows Phone 7 then it’s mojo will certainly be back. Detractors could point out that this version of Windows Phone 7, rather than being a 7 month late update, should have been the very first iteration. However, WP7 and the Kinect’s natural user interface design may not be as second rate as technological hipsters would have us believe.

Regarding user interface design the tiles are now more widgety, if such a word exists! Apps now show more information, e.g. real-time flight information from British Airways, on the tiles themselves making them even more useful. The social integration pioneered by the ill-fated Kin phones really shines here. None of the other major smartphone OSes offer such a comprehensive integration of social networks into its fabric and user interface design. Messages are now threaded across platforms meaning that someone can send you an SMS, chat, email or Facebook message and it will all be displayed neatly in a single place of the user interface design without having to launch the separate apps. Photos taken from the phone can be added to Facebook with faces tagged natively. Similarly Facebook events are integrated into the Calendar app from where you can RSVP, take that iPhone! With improved multitasking and a more forward thinking Bing, Mango makes Windows Phone 7 worthy of purchase. The question is will the improved features and user interface design of iOS5 and Android 4.0 squeeze all the Mango juice dry!

Hot on the heels of Microsoft’s re-boot of its Hotmail service, Google has tweaked and added features to its Gmail service and its widely familiar UI design. One of the features that I really liked was the ’sweep’ inbox management system which, considering that 90% of all webmail traffic is spam is a welcome addition. And it’s not just spam but all the social networks’ notifications, newsletters etc. and other websites that we sign up to sending us all manners of notifications that we may not want to unsubscribe from but are not that important. These last type of mails are known as “bologna” or “bacn”. Somewhere in all this are actual important emails from friends, family and work that are actually what e-mail was precisely designed for. Gmail now has a new feature entitled Priority Inbox to combat this type of email overload.

I found the Priority Inbox to score high in usability as it was very simple and straightforward to set up and use. Nestled at the top right of the interface design right next to the settings it is easy to find and always at the tip of your finger when you need it. Activating it offers users the chance to watch a short video describing the new service, should they wish to see it. An overlay appears that already sees Gmail suggest what are important and not important mails. Users can confirm this or change the suggestions. Important emails are unmistakable due to having a yellow mark along with the subject of the email. Priority emails naturally appear above the general inbox and have a corresponding folder. This feature is sure to make an already popular online software application much more manageable

Remember the end of the 90s? Microsoft was the all-conquering yet stuttering goliath. Apple was constantly in its shadow despite Microsoft borrowing a lot from Apple’s user interface designs. Fast-forward to more than a decade later it is Apple that has become the goliath and Microsoft living in its shadow (perhaps not in the software field, but certainly in the hardware section). This is none more so striking than in the mobile devices space. Microsoft’s tablets never took off despite Bill Gate’s proclamations and Windows Mobile’s smartphone market share shrunk to a dismal 5% well behind Symbian, BlackBerry, Android and, of course, the iPhone. And Vista, well let’s just not go there!

Windows Phone 7 sees the Redmond incumbent attempt to try to wrest more control of the highly prized smartphone market. The user interface design is refreshingly original. While a lot of the interface designs of other smartphone OSs seem to be playing the ‘me-too’ with Apple’s iOS in essence replicating its UI design. Windows Phone 7’s interface design features the ‘Tiles’ and ‘hubs’ system. Tiles and hubs link to a group of applications. The people hub for example integrates and reconciles your phone’s contacts together with those on Facebook, Gmail etc. It even suggests contact matches and acts as a log for calls, text messages, emails and status updates all within one hub of the interface design.

The Music and video hub has all the content in one place meaning users do not have to switch from one app to another. The same goes with the Office hub and documents or the Games hub. This makes for a slick navigation experience unlike any other. Users also have the option to add individual apps as tiles on the phone’s user interface design. But this then means that you have to scroll down for longer. The tiles themselves are used by first-party apps to display information. For example, an app for an alarm clock will display when the alarm is supposed to go off etc. It will be interesting to see how developers combine this functionality with their apps to the phone’s interface design.

Interfaces designs are sweet, but those uncluttered

Are sweeter:  which is a reason why users stay on

When a website is clear it becomes more endear’d

Leading to increased visits and subjective satisfaction

Being used with great ease and not wanting to leave

Accomplishing tasks with minimum error scares

Knowing I can recover if something goes amiss

Though winning near the goal – yet, I do not grieve
For using this graphical user interface design is bliss
With a high level of memorability, this interface design is a breath of fresh air!

Based on “Ode to a Grecian Urn” by John Keats

The idea behind this series of blog posts is to look at famous poems and use them to shed light on issues that affect usability, wireframes, wireframing tools and user interface design. If you have some suggestions of poems that you would like for us to interpolate, please feel free to do so by leaving a comment with your request in it.