wireframe website, wirframe, wireframes

How to use wireframes for hybrid website design

Posted on December 30, 2011 by admin

Some websites can be categorized along the lines of retail, education, information, social or entertainment. If your website doesn’t fit into a distinct category and instead includes elements from various types of websites, it can be difficult to get to grips with what the main aims of your website are. Unifying the different elements of your website can also seem overwhelming. Some people find it useful to use wireframes in the early planning stages to help them overcome these obstacles.

What are wireframes?
Wireframes are low-fidelity mock-ups of the individual pages of a website. These can be sketches on a piece of paper, or can be created using wireframe software. Wireframes let you draft the basic outlines of where you want the main elements, such as images, text and interactive elements like buttons to appear on your page.

How can I use wireframes?
When you are creating a website it can sometimes be difficult to see the bigger picture. You can lose sight of the fundamental aims of your website and what you hope to gain from your visitors. Creating wireframes can be a useful way for you to focus on the most important elements of your website before tending to the finer details. With a hybrid website, continuity is important to give your users a unified experience. One of the benefits of using wireframe software is that some tools allow you to reuse elements on more than one page. You can therefore create a unifying feature in your wireframes, such as a key image or tool bar and include this in all the pages.

Using wireframes the right way
People often find wireframes useful when coming to terms with a large or complex project. When a website contains many different features and seems to have many different demands of the user, wireframe prototypes can help you get to grips with what the outcomes of your project should be. Using wireframes helps understand design alternatives and narrows down your ideas to the physical layout of your page. Wireframes also allow you to consider how consistent your design is. And wireframes are a great way to simplify your designs. It’s a great idea to show your wireframes to end users to get feedback on what’s effective about your wireframes, so that your end product will be as user-friendly as possible.

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

Moving beyond low and high fidelity prototypes: socially conscious fidelity in prototyping

Posted on June 20, 2011 by admin

Fidelity is one of the main topics of discussion in the world of prototyping (or wireframing).  Varying degrees of fidelity, low to high and everything in between, influence the way a wireframe prototype is received by stakeholders and users alike.  However, the concept of fidelity in relation to prototyping has expanded in the last few years, moving in a direction that can even be called socially conscious.  UX designer Paula Wellings claims that in prototyping the environmental and social contexts of the design process need as much exploration as the strategic (low or high fidelity) considerations.   By this she means expanding the notion of wireframe prototype fidelity to include the categories of environmental fidelity and social fidelity.

Environmental Fidelity

Environmental fidelity has to do with how the surroundings in which your design is utilized will impact your user, your prototype and the ultimate end product of your design. According to Wellings, environmental fidelity prototypes should be characterized by the following questions:

What kind of physical spaces or architecture impact your design?
Are physical factors (light, smell, landscape, temperature) relevant to the experience your design prototype is trying to support?
What role do artifacts, tools and concepts play in people’s activities related to the design you are prototyping?

Social fidelity

Social fidelity considers the social contexts in which your design prototype is utilized and how they will impact your user, your prototype and the ultimate end product of your design.  Wellings asserts that social fidelity prototypes should be characterized by the following questions:

  • What roles do individuals, households and larger groups of interest play in relation to the world and your design?
  • What role do peoples’ existing desires, hopes, dreams, disappointments play in your design?
  • What social rules govern the interactions of people—both implicit and explicit rules?
  • What behaviors do people engage in that they are not able to notice or describe?

Wellings notion that prototyping fidelity can add a socially conscious element to its implementation is definitely fresh and innovating.  As we become more and more connected with the technologies that characterize our world, it is nice to see that some designers are trying to ensure that those technologies mirror our needs and realities as humans.  Whether or not Wellings’ new prototype fidelities will become trademarks of the prototyping method remains to be seen, but it is still exciting to speculate about the possibilities.

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

Organic User Interfaces and User Interface Design

Posted on May 30, 2011 by admin

Arguably the two most exciting arenas in user interface design today are mobile devices and Natural User Interface designs. It can also be argued that although mobile devices are a significant market today it was by employing natural user interfaces on smart phones as popularized by the iPhone and the iPad that the market took off. The intuitive ease of use of touching and pinching et al vastly improved usability for mobile devices that had traditionally relied on physical buttons to interact with their user interface designs. With more screen space freed for user interface design mobile devices became not just more beautiful but also more practical. New horizons were opened to user interface designers as many struck gold coding apps with UI designs tailored for their small screens. Other commercial devices that use natural user interface designs are constantly emerging on the market with the Wii, and the Kinect as good examples. What this means is that user interface designers will continue to be in demand to create tailored user experiences to fit these new products.

How do organic user interfaces increase the horizons for user interface designers?

The rise of organic user interfaces (OUI) will further offer opportunities for user interface designers to apply their skill-set to UI design niches that become more and more mainstream with the passage of time. OUIs are user interfaces that can change and take different forms but also use the display as input device. In other words input device equals output device and the Microsoft Surface is a good example of this. The form of the organic user interface design equals the function such as with displays that you can fold like a newspaper.  The form, in turn, follows flow meaning that organic user interface designs have to be based on context that is intuitively graspable.  The possibilities with organic user interfaces are vast because they connect with the physical experience of humans. In fact you can almost say we have come full circle to the way caveman perceived forms on walls and effectively created static user interface designs thereof.  Tennis tables that tracks where the ball lands, 3D maps, jewellery with displays, and clothing are a few examples of products that could become displays that user interface designers will be happy to embrace!

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

Wii 2 – Innovative User Interface Design

Posted on May 23, 2011 by admin

The original Wii, released in 2006, was a big gamble on Nintendo’s part. Having seen Sony and then Microsoft steal the spotlight in an industry Nintendo had long dominated, the Wii had to be a success. While Sony and Microsoft engaged in an arms race reminiscent of the Cold War by offering more powerful versions of essentially the same thing, the Wii was relatively underpowered. This allowed the Wii to also be cheaper. But it was the innovative Wii Remote that was the game changer. Using motion sensing and pointing capabilities as a user interface design in order to manipulate games was novel in the industry. And the user interface design proved so popular an attraction it forced its rivals to start prototyping answers. Sony released the somewhat similar Move controller while Microsoft released the hands-free Kinect which works through a so-called natural user interface design. These peripherals have already made their way past the consoles and have started to transform the user interface designs of computers among others.

How does the Wii 2 promise to innovate the user interface design of consoles?

Now that the novelty of the Wii has worn off the questions is what next for Nintendo? Clearly, the Wii’s UI design is manifested in its rivals’ offerings of cutesy avatars and casual games.  This approach towards user interface design has been markedly successful by engaging demographics not traditionally associated with gaming, such as females and the older. This has not been without consequence, as hardcore gamers were alienated and casual gamers appear to be more inclined towards gaming on their mobile phones.  According to The Guardian a Wii 2 announcement is imminent, and the new console will be more powerful than the Playstation 3 and Xbox 360. The Wii 2′s controller also promises to be innovative with multiple sources stressing it will feature a six-inch touchscreen display.  It could have a user interface design that is a cross between the lower screen of the DS and an iPhone to enhance gaming. An announcement at E3 this June is widely expected.

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

The User Interface Design of Windows 8 – Could Windows 8 integrate the Ribbon into its UI Design?

Posted on May 2, 2011 by admin

Microsoft has announced a developer’s conference in September where it is expected to unveil its future strategy. In recent weeks a number of screenshots have leaked, purportedly of various aspects of the user interface design of the, as-of-yet, unannounced Windows 8.  The screenshots “leaked” so far show that the user interface design of the forthcoming Operating System is an amalgamation of Microsoft Office, Windows Phone 7 and the preview of the upcoming Mac OS X Lion.  With regards to the UI design of Lion, the screenshots point to a user interface design that is inspired by tablets like the iPad. Windows 8, it seems, will also have an App Store which is not only similar in name to Apple’s but also bears a strikingly similar UI design. With regards to Office, the UI of Windows 8 looks like it is going to incorporate the Ribbon as a central design element.


The Ribbon interface design was initially seen in Office 2007 as part of what Microsoft dubbed its Fluent User Interface Design. Essentially the Ribbon is a tabbed toolbar that sits at the top and is intended to make the software application that incorporates it more efficient to use.  Ever since its launch the Ribbon user interface has been implemented into more and more Microsoft applications. The screenshots, from WithinWindows, suggest that the Ribbon design will now be embedded into the OS via the Windows Explorer. The main advantage of the Ribbon is that features no longer have to be buried deeply within menus, although something could be done about the sheer size of the toolbar. The screenshots also have placeholders for icons meaning Microsoft could well still be testing and thus could still find a way to reduce the size of the toolbar for the benefit of a sleeker user interface design.

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

Early Internet Explorer 10 preview

Posted on April 25, 2011 by admin

Despite the very recent release of its brand-new and well-received Internet Explorer 9, Microsoft is pushing ahead and already looking towards the future. This week Microsoft gave interested users a small glimpse of what they can expect from IE version 10 by previewing some of its new technologies and features.

Interoperability between varying user interfaces will be one of the main themes of IE 10, and Microsoft will continue to build upon the hardware-accelerated HTML5 legacy they began with the building of the IE 9:

“With the majority of consumers using multiple devices, the performance and rich experience of native applications demand the time and investment of re-writing applications from device to device. As a result, technology standards such as HTML5, which deliver superior performance through Web-connected devices, play an increasingly important role.” (Microsoft.com)

In a nutshell, IE 10 will be an extension of IE 9 with a revamped user interface design and a stronger commitment to facilitating the development of cloud apps that can be used with different gadgets and devices as seamlessly as possible. The fact that Microsoft is already previewing and planning its newest version of the Internet Explorer a mere month after debuting its current version of the web browser shows that the tech community is trending towards and has come to expect the rapid development and release of new products.  The needs and use case scenarios of users and designers are changing daily, and thus the systems that support them must also move at lightning speed to remain relevant and competitive.

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

The Usability and User Interface Design of the Wikipedia Beautifier Chrome Extension

Posted on April 14, 2011 by admin

When Wikipedia released the latest iteration of its user interface design leaps and bounds were achieved in terms of usability. The resultant UI design was cleaner, leaner, improved navigation, and made it easier to edit. These changes were brought on after the Wikimedia Foundation commissioned comprehensive usability testing, and no doubt tested wireframes created using wireframe tools until the current Wikipedia user interface design was approved. It appears that for some users these changes to the user interface design did not go far enough. Enter the Wikipedia Beautifier, an extension for Google Chrome that accentuates the content of entries. The extension is inspired by web apps such as readability that streamline content on web pages and delivers them in a user interface design more in the vein of books.

How does the extension change the Wikipedia user interface design?

There are a number of UI design changes the extension imposes on Wikipedia entries. For starters, the font of the content is changed to bigger serif fonts that are also justified to the center-right of the user interface design. The top and the left of the user interface design still remain for the site navigation and search etc. There is a catch though, and that is the top and left of the user interface design appear blank. They are, however, still available and they fade in by hovering the mouse over them. The extension also automatically adds hyphenation and adjusts margins so the content lines up better on the screen. Although the invisible top and sidebars is initially confusing heavy users of Wikipedia would benefit from the usability of the extension. This is due to these user interface design changes applying only to Wikipedia without affecting other web pages. Enjoy the read!

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

Google Docs User Interface Design Update

Posted on April 9, 2011 by admin

Google has recently updated the user interface design of its Google Docs cloud-based productivity suite.  The interface design revamp is more evolutionary than revolutionary with the changes being smaller little additions. The new UI design changes reflect changes to Gmail, namely the Priority Inbox, and should ease navigation. Google Docs users can now star documents by simply clicking the star at the top of the screen next to the document name. All “Starred” documents can also be found in the Starred subfolder on the left of the GUI design for quick retrieval.

After Google allowed users the option to upload non-Google Docs format files (i.e.  Microsoft Office, JPEGs, and MOV files etc…) many users complained that organizing files had become more cumbersome. To this end Google has updated the interface design of the document list. New filters such as “Owned by me”, “Shared with me” and “Public on the web” further prioritize and sort documents. A preview panel has also been added to the right side of the document list interface design to allow users to see preview thumbnails and sharing settings etc. at a glance. Videos can also be watched this way.

Justifying paragraphs in documents has also become easier as Google has added justifying buttons to the toolbar. This makes Google Docs’ interface design echo traditional Office UI design as users no longer have to select Format then Align then Justify. Discussion threads have also been given an update. All new collaborators on a document are now included in discussions by having access to the email thread. This is intended to put an end to multiple email threads on a single document simply because new collaborators have been added to a document.

Other changes to the Google Docs interface design include the new “Home” view which allows users easier access to their most accessed content. Files can be manually barred from the Home view and will still be accessed in “All items”.  “Folders” has also been replaced by “Collections” in the left navigation bar and is another way to organize files in whichever way users like. Changes like these and more to the Google Docs user interface design should make the suite even more essential to users looking for flexible options regarding their documents.

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

Battle of the Android App Web Stores

Posted on April 4, 2011 by admin

Amazon has recently released the much anticipated Appstore for Android providing an alternative to Google’s own Android Marketplace Web Store and the third-party AppBrain app store. The Android Marketplace was never acclaimed in terms of user experience owing to a less hands-on approach from Google compared to Apple’s App Store. Android is now the OS on most smartphones sold today so the potential for profits is immense. The trouble is navigating the user interface design (UI design) to find the right apps. Companies such as Gameloft have long been offering their Android apps directly from their own website.

What are some of the usability and user interface design differences of the Android app stores?

In terms of usability Google’s Android Marketplace Web Store, thankfully, allows users to push app purchases directly to the phone via the web (so does AppBrain albeit less pronounced). It also features a tabbed user interface design which is great when switching between categories. On the downside, discoverability suffers from users having to click on an app to get information about it. AppBrain, on the other hand, incorporates better discoverability into its UI design. From the get-go AppBrain displays average rating, number of ratings received, number of times downloaded for each app for a better overview of apps. In terms of navigation AppBrain employs scrolling and numbered pages à la Google Search.

How does Amazon’s usability and user interface design improve Android app purchase?

The Amazon Appstore seeks to capitalize on Amazon’s established usability and user interface design credentials. Users familiar with the Amazon UI design will feel right at home getting their Android apps from this source. Apps are categorized in a myriad ways allowing users to sort apps in a number of ways. Amazon also recommends apps and shows users what other apps were purchased by others who bought a particular app, just like on Amazon proper. Users also get to pay with one click using their Amazon account. Considering the implementation of calling or emailing customer service within the user interface design the Amazon Appstore is clearly positioning itself to be the premiere Android app store. In addition to offering daily free apps and exclusives users would be hard pressed to disagree.

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

User Interface Design Terms Explained: Human-Computer Interaction (HCI)

Posted on April 2, 2011 by admin

What is Human-Computer Interaction and how does it relate to user interface design?

Human-Computer Interaction (often abbreviated as HCI) is an interdisciplinary area of study largely concerned with the intersection where people come into contact with computers, namely user interface designs. As a discipline it encompasses computer science, behavioral sciences, interface design, interaction design, usability engineering and other fields of study. While technological innovation at the hardware level seems to get all the headlines, it is great user interface design that makes them successful. A good historical example of this is with the ascent of Microsoft and how this correlated with the rise in personal computing. Windows made the computer hardware and software accessible and easy to use – through a novel type of interface design. Although Human-Computer Interaction also refers to many products with traditional electronic displays and/or physical controls such as microwave ovens or aircraft (here, often the term Human Machine Interaction or HMI is also used), I shall mainly look at it from the point of view of computers, software and their user interfaces.

Human-Computer Interaction, Interface Design and Usability

Two of the goals of Human-Computer Interaction and interface design are to maximize usability and user satisfaction. A poor human-machine interface design, such as using non-standard interface design layout can lead to a number of unexpected problems that could be catastrophic at worst. Improving the interactions between users and computers and meeting the user’s needs regarding the interface design are key when creating successful systems. The design activities relating to Human-Computer Interaction significantly determine how successful systems are in terms of user acceptance, in terms of how productively the system can be used to accomplish critical tasks, and to how popular systems are with users and what market penetration they can reach. Often, the aspects relating to efficiency of use are summarized as usability.

Human Computer Interaction and Usability Testing

The examples above illustrate why HCI is such an important aspect when designing systems. That’s why designing human computer interaction should be done hand in hand with usability testing as early in the interface design process as possible in order to keep the costs of fixing usability problems down (before code has already been written). The key is to apply a User-Centered Design approach when designing user interfaces by focusing on users and the tasks they would need to accomplish through the interface design. This involves concentrating on issues like these: Who will be interacting with the computer or who will be using the interface I am designing? What demographic am I targeting with my computer software application or website? What tasks would they need to accomplish using my product? An iterative design process is key here as the first concept for an interface design is rarely perfect. This is done in four steps: design the user interface, test the user interface for empirical quantitative data, analyze the data, and repeat from the beginning using the new insights. This process is to be repeated until a user interface design that is user-friendly and scoring high on usability is created.

Posted in Interface Prototyping, Prototyping Software, Wireframe, Wireframe Software | Tagged , , , , | Leave a comment