wireframe website, wirframe, wireframes

How to use prototyping tools to get the best out of your iPhone app

Posted on December 30, 2011 by admin

Prototyping tools are useful for designing computer-based applications. With the popularity of iPhone applications, prototyping tools have become more important than ever to get apps on the market quickly and easily.

If you are used to using computer-based prototyping tools, you should bear a few things in mind when creating an iPhone app. Users interact differently with a phone than with a PC. The iPhone screen is much smaller and its pages are navigated by touch-screen. Therefore some app creators find it useful to use a prototyping tool, which can be used on the iPhone itself. That way, depending on the features of their prototyping tools, they can see whether the layout and graphics size of their prototype work on a smaller screen.

Remember that with prototyping tools you can explore the usability of your app before complex programming is involved. This can be done through usability testing. This is particularly important with the iPhone, where instructions for applications are short and users often rely on their own intuition. With some prototyping tools, you can test out the interactive features of your app and review the end user response. You may find that some things that work on a larger screen just don’t translate well to the smaller device, or to touch screen interaction.

Remember that the iPhone is a device to be used on the go, so prototyping tools should be used to create the most accessible, intuitive and user-friendly app. That way you’ll create the best experience for your users with the support of your prototyping tools.

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

Professional Blogging on the iPad

Posted on July 23, 2011 by admin

One of the biggest criticisms of the iPad when it was released was that it was too much of a toy to indulge in consuming and not for being creative and/ or productive. However with time developers and user interface designers have developed applications that challenge this notion. These apps, such as iMovie and GarageBand, featuring user interface designs optimized for the smaller touchscreen of the iPad would prove, in a number of ways, to improve on the usability of their desktop kin. This is due to the intuitive and accessible nature of Natural User Interface designs. One way of looking at them is that natural user interface designs tend to cut-out the middle-men (usual suspects being the mouse and physical keyboards) leaving less of your actions and interactions somewhere lost in translation.

Up until now the iPad wasn’t ideal as a blogging tool as most blogging apps tended to be rudimentary. Blogsy, a professional class tool, aims to change all that. Usability is ensured by a great user interface design and the ease of drag-and-drop. Users need only worry about the content and not HTML coding as the app takes care of that. It has all the features needed to create and administer a blog including  a pop-over web browser to ensure you don’t have to leave the app at all to get your blogging done. With Blogsy iPad users no longer have to forego rich media editing as you can add and format pictures and videos with the drag of a finger. Across the user interface design. Not bad for a first iteration, despite the few bugs here and there.

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

Requirements For Low Fidelity Wireframe Software

Posted on July 12, 2011 by admin

When creating wireframes of user interfaces there are two main routes an interface designer can take. One way is to make them full of detail and graphic elements or, in other words, as close to the intended final design as possible. The other route is more Spartan, focusing on the crucial aspects of a user interface design such as the navigation, structure and general layout. These two basic methods are measured in fidelity. The first type of wireframes are known as high fidelity wireframes (sometimes referred to as high-fidelity wireframes or hi-fi wireframes). The second type of wireframes are known as low fidelity wireframes (sometimes referred to as low-fidelity wireframes or lo-fi wireframes). In this blog I shall focus on low fidelity wireframes and what is required from low fidelity wireframe software.

What are the requirements of low fidelity wireframe software?

One of the key requirements of low fidelity wireframe software is that the creation of lo-fi wireframes be as easy and quick as possible. The whole purpose of wireframes is to be able to quickly create them to flesh out ideas, communicate them to others, and use them for usability testing.  Low fidelity wireframe software that require a high proficiency to use would perhaps defeat the purpose. Anybody with average computer skills should be able to use the wireframe software. Another way of looking at it would be that the wireframe software should be more like PowerPoint than Photoshop.

What are other requirements of low fidelity wireframe software?

Another requirement of low fidelity wireframe software, which is sometimes overlooked by certain wireframe software, is the ability to make clickable low fidelity wireframes.  Wireframe software programs that create clickable wireframes usually have the advantage of being able to simulate workflows and use cases. Clickable wireframes can then be shared and the user interface design navigated as if it were a web page or software application. Teams could use the wireframe software to iteratively develop their wireframes by way of collaboration. Leveraging other Web 2.0 technologies, some low fidelity wireframe tools operate through the cloud in order to be universally accessible as well.

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

Usability and best practice sets

Posted on June 20, 2011 by admin

The term “best pactice” is thrown around frequently in nearly all professional sectors, from usability, user experience, or user interface design conferences to school staff meetings.  Employing best practice means using a technique that is standardized, structured, and proven over time to lead to the successful accomplishments of tasks.  Though the term has become somewhat of an annoying cliché, it is worth looking at best practice from the perspective of user interface design.  This way, we can define what best practice means in the context of user interface design and how we can capitalize on it as a usability boosting method.

In the world of user interface design, best practice is a term that is linked directly to increasing usability.  Creating a set of UI design best practices can give you a better chance of optimizing your application’s usability. So what are sets of design best practices?  They can comprise any of the following:

  • Design method (waterfall design etc.)
  • Testing method (what kind of usability test)
  • Design teams (create sets that suit different designers—for example, what designers work best with the waterfall method etc.)

Above is just a basic best practice set that you can create to fit each corresponding UI design scenario and increase the overall usability of your project without having to do to much pre-planning—the best practice set is the pre planning.  You can fill out your best practice sets the more complicated your user interface design project becomes.  Creating a best practice set requires creativity and a thorough knowledge of your (and your users’) needs in order to capitalize on usability and design successfully.

Posted in Interface Design, Interface Design Software, Interface Design Tool, Online Wireframe Tool, Paper Prototyping, Prototyping Software | Tagged , , | Leave a comment

What to look forward to in Safari 6

Posted on May 30, 2011 by admin

Far from being decided the browser wars keep on getting more and more competitive. Much like credit cards (especially before the financial crisis) they are being bandied about by various interest groups purportedly offering the best deal. Of all the major browsers (Firefox, Internet Explorer and Chrome to name the most notable ones) Safari is overdue for an update but with the latest iteration of Mac OS X due this summer.  I would be surprised if the user interface design of Safari is changed drastically. This is because the user interface design is already very streamlined and efficient. But I won’t be surprised if the address and search bars become merged leaving just one text input field on the UI. At the very least the address bar could also double as a web-search bar.

Safari 6 will no doubt have expanded HTML5 capabilities as Apple has thrown it’s considerable weight behind the standard. The Reader mode, which improves readability and usability by transposing text content onto an overlay above the user interface design could be slightly refined. This could come in the form of being able to save the content into a pdf file or e-book format with one click to read offline or in an e-book reader. This could be handy for long encyclopaedic articles. Further advances could be allowing users to view videos from within the UI of the Reader mode. Safari 6 will also most certainly incorporate the iOS style gestures such as pinch, swipe and tap. Apple videos previewing the next Mac OS X show these actions being performed on Safari!

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

The user interface design of the BendDesk prototype

Posted on May 23, 2011 by admin

One of the interesting visions of the office of the future is the BendDesk designed by the Media Computing Group of the University of Aachen. The basic concept is to merge the desk with the computer into a unified surface and user interface design. BendDesk is a form of the emergent natural user surface designs that promise to deliver us closer to our favorite sci-fi films. Although touchscreen displays and all-in-one computers are available the BendDesk goes further by turning the entire area where you’d place keyboards etc. into a user interface design. This merges with a horizontal display creating a continuous workspace. The user interface design is manipulated through multi-touch gestures. The horizontal and vertical axes are joined by way of a curved screen.

How does the BendDesk free up the horizons of user interface design?

Although the BendDesk is still only a prototype, and a clunky one at that, advances in foldable e-paper technology and the Microsoft Surface show that the introduction of such novel concepts into the work environment is perhaps not as far off as it might seem. In terms of usability the BendDesk promises to deliver a user interface design that is more contextual and unobtrusive.  Imagine a keyboard on the user interface design that you can push aside as you choose to grab a stylus or use your finger to photoshop. The keyboard itself can also change size, regional settings or add special buttons to accommodate different people, languages, or games. Context-sensitive systems have long been a hot topic in the information technology space. The BendDesk would provide a great platform for context-sensitive applications. Adding programmable specialized buttons to the user interface design should be easy to do, unlike with a physical keyboard. One issue, however, the BendDesk crew have to sort out is the question of feedback as typing on a screen is so far not as comfortable, nor productive, in the long-run as typing on a physical keyboard.

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

HTC Sense User Interface Design 3.0

Posted on April 30, 2011 by admin

The relationship between HTC and Android has been a symbiotic one with both enabling the other to thrive. Initially HTC focused on Windows Mobile but with the advent of the iPhone something had to give.  Compared to the iPhone’s user interface design, Windows Mobile’s user interface became decidedly archaic. Then came Android and HTC released the world’s first phone to feature the then nascent OS, albeit with a somewhat clunky user interface design. Since then both Android and HTC have grown in leaps and bounds culminating in the former attaining the biggest smartphone market share and the other being named “Device Manufacturer of the Year” at the Mobile World Congress 2011.  One masterstroke that HTC managed to pull off was in implementing their own Sense User Interface design on the then spartan Android UI. The Sense User Interface design made Android not only more beautiful but, importantly, more usable.

How does the Sense User Interface Design improve User Experience?

This is achieved by way of widgets and applications that allow users to access information and unlock Android features all within the UI design of the homescreen. The range of widgets and applications of Sense User Interface design include mail, calendar, weather, music, social media streams, and quick access to settings. The recently announced Sense UI design, namely 3.0, adds further iterative tweaks to the user interface. These include improved apps and widgets, new 3D transitions, and a marketplace for multimedia content. One of the more dramatic changes to the Sense User Interface features are the new lock screens which can also serve live information, such as stock prices, without having to unlock to update. The lock screen allows you to jump right into a particular app when you unlock. The catch however is that only the very latest dual-core behemoths from HTC will have the new Sense User Interface design.

Posted in Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping, Ui Design, Ui Prototyping | Tagged , , , , , | Leave a comment

The User Interface Design of Mobile Content

Posted on April 25, 2011 by admin

This next blog entry is inspired by usability guru Jakob Nielsen’s usability newsletter regarding a study on mobile content and user interface design. The premise of the study is that complex web content on an iPhone-sized screen scores only 48% in comparison to desktop monitor comprehension scores.  In other words readability is doubly hard to achieve on such a screen size. Considering that phones with the aforementioned screen size are the exception rather than the rule it’s not hard to see how complex web tasks present a number of user interface design challenges.

Small screens mean that users see less content at a time, so the memorability of the user interface needs to be boosted. Unlike on a desktop screen where users can simply glance all around the user interface design, users of a mobile device must spend more time scrolling. This leaves them more susceptible to diversion as navigating the user interface design usurps the consumption of content. Users are also confronted with a higher number of pages and thus need to reacquire the previous location more often. The use of breadcrumbs to illustrate the underlying structure of the user interface design is crucial in this regard.

User interface design for mobile devices is also not simply a matter of a tiny screen. Most mobile devices feature no physical keyboard making an already small screen even smaller to accommodate a virtual one! If you think of the vast numbers of websites which are online, user interface design is mostly geared to desktop screens. Although the number of dedicated mobile apps is on the rise, there is a lack of consistency when it comes to user interface design. For example, Facebook’s privacy policy contains 35 times the number of words users actually read during an average visit. Simply cramming it all into an iPhone size user interface design actually reduces comprehension scores by half! In such a case shorter and simpler text would go a long way in achieving great usability.

Posted in Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping | Tagged , , | Leave a comment

Eye-Tracking & User Interface Design

Posted on April 14, 2011 by admin

Oscar Wilde once quipped that “life imitates art more than art imitates life”. This certainly feels true when it comes to technology nowadays. As Moore’s Law marches on, technology that was once the preserve of science fiction seems to have infiltrated reality. Today Human Computer Interaction (HCI) is undergoing a radical shift with the advent of technologies such as eye tracking software, Nintendo’s Wii motion controller and Microsoft’s Kinect natural user interface motion controller. This has huge implications for personal computing and user interface design. User interface design conventions up to now have been centered around the use of keyboards and mice as input devices.

One of the highlights at the recently concluded CeBit consumer electronics show was a fully featured laptop incorporating a user interface design based on eye-tracking technology as a way of using the device. The challenge for user interface designers is how to get the balance right between the precision eye-control affords and the intentions of users. After all on a mouse or a keyboard you click when you want to accomplish a task. With eye-control reading is a pleasure as you wouldn’t have to scroll down the UI manually. For some people, it might be the only option to control a device effectively. Conversely multi-touch gestures could be transcribed in eye-movement speak, such as swiping with the eyes to peruse through photos etc.

On the other hand what happens if something were to distract you from your gaze or a nervous twitch sets in? To ensure good usability error frequency will have to be kept at a minimum and users will have to be able to recover from them. The same goes for Kinect style motion capture inputs. It’s all well and good being able to use hand gestures (at the risk of appearing silly) but this can also just as easily be tiring. All these new inputs open up a world of possibilities, so much so that we seem to overlook the evolutionary effectiveness of the nimbleness of our fingers. Controlling user interface designs with your eyes only would be as limiting as using a mouse only. The real gold, perhaps, lies in the hybridization of input devices. The precision and new paradigms afforded by these devices will allow interface designers to create interface designs that will make today’s rich web apps appear as quaint as websites in the early 90s.

Posted in Clickable Wireframe, Clickable Wireframes, Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool | Tagged , , , , , | Leave a comment

Android 2.3 Gingerbread – What is Google’s approach to Gingerbread’s interface design?

Posted on April 9, 2011 by admin

When describing the virtues of Apple’s iOS words like slick, user friendly, and beautiful come to mind. Repeat this exercise with Google’s Android and words like open source and other such nobler yet plainer words come to mind. Sure, the iPhone maybe prettier and all but Android represents independence etc. an Android user might say. The latest version of Android, 2.3 Gingerbread, is all about closing that emotional gap with a user interface design primarily aimed at the subjective user experience. In today’s mobile devices landscape, simply latching a number of functions to a user interface design is not a guarantee of success. Users’ are voting with their purchasing dollars in favor of UI designs that make them feel good while using them. Interface designs, like the Symbian OS, that have been mired in the old paradigm have done nothing but lose market share.

What is new to Android’s user interface design?

With Google seemingly shifting all of its Android UI design efforts towards tablets Android 2.3 shows that Google has not dropped the ball. The GUI sports a number of refinements to improve navigation and overall usability. According to Google Gingerbread adopts a simplified visual theme of colors against black that brings out vividness and contrast to menus, notification bars, and other parts of the user interface design. The menus and settings themselves also feature changes that make it easier to access and customize. The keyboard has also been updated with reshaped keys. This in addition to multi-touch support allows users to enter symbols and numbers without having to manually switch input modes using the shift button. Other under-the-hood improvements include improved battery life and cut and paste further close the user experience gap with the iPhone.

Posted in Gui Prototyping, Interface Design, Interface Design Software, Interface Design Tool, Interface Prototyping, Online Wireframe Tool, Paper Prototyping | Tagged , , , | Leave a comment