Category — Interface Prototyping

The internet is based on links— it wouldn’t exist without them.  While search engines organize the internet, links build it. Links facilitate the internet’s ubiquitous exchange of information. If you want to improve your interface design’s online visibility, then building a link directory is a good strategy to begin with.  Link directories that are well-designed and contain helpful, related, and relevant links make your interface design more appealing to users.  In addition, the better your link directory, the higher your interface design’s search engine ranking.  This is because websites with excellent link directories are considered authorities on the given content of the site.

Link building strategies

There are various strategies you can employ when creating your website’s link directory.  When building your website’s link directory, think carefully about search engine optimizations.  Is it important for you to have a website that is highly rated among search engines?  Undoubtedly, a high search engine ranking is important to you, and some linking methods are better for search engine optimization than others. Here are a few popular methods of website linking that you can use

Adobe Flash (née Macromedia Flash) has become so ubiquitous with the internet that many users don’t even notice its presence underneath the interface design, unless of course you are an iPhone user! Most of the videos on the web are delivered via Flash. Not only video, but also games, widgets and apps that deliver content such as music use Flash. The iPhone’s lack of official Flash support has become such a hot issue and is nicely parodied by this photo that lampoons the iPad’s usability and user experience credentials. One of the upcoming Flash CS5’s flagship features allows developers to re-purpose existing Flash code and export it as iPhone, Android or Blackberry applications. To date, over 100 apps in the App Store have been created by a small group of developers using private beta versions (and this includes games that can be played concurrently by, say, someone using an iPhone while the other uses an Android phone).

Along with announcing its upcoming iPhone OS 4, Apple has changed the terms to section 3.3.1. of its iPhone Developer Program License Agreement to effectively prohibit the use of cross-platform software toolkits such as Flash and MonoTouch. But aside from Apple simply not wishing for a competing company to usurp its territory, there are a couple of other possible reasons not to allow cross-platform toolkits. The first has to do with maintaining quality. A single app based on Flash code for three different platforms might not play to the strategic advantages of each. Flash also saps a CPU’s power and is blamed by Apple to cause most browser crashes on the Mac OS X. Another reason is simply that Flash is proprietary technology. Unlike CSS, Ogg Theora, Javascript or HTML5 for that matter, Flash code is the fiefdom of Adobe. Whether or not iPhone apps created for multiple platforms would maintain ‘quality’ is open to debate, after all YouTube et al seems to work just fine whether one may be using a Windows, Mac or Linux computer. Regarding crashes on the Mac platform, Adobe itself has promised to speed up and improve Flash Player. Yet, also the argument that Flash is a closed proprietary system seems valid.

This is the second part of a four part blog post series about the future of the real-time web.

Real-time Information: Importance of Filters and Agents in Making Use of Available Information
The internet has been a great promoter of data generation, with estimates of a petabyte of data being generated daily (that’s 1 million gigabyte or about ten thousand large hard drives each day)! The great thing about the internet is that data is not only generated by professionals or institutions as is common with traditional media (think of TV stations, publishing houses, etc.), but also comes from a large amount of individuals. The growing importance of networks such as Twitter and Facebook, for example, has led to Google indexing user-generated content in its search-engine.

Data on its own is abundant and can exist in many forms. Every second, new data is released on the web in real-time and becomes accessible immediately. The data becomes information after it has been given meaning by way of relational connection. So identifying and combining relevant data becomes the challenge. Software solutions such as the open source Hadoop project help in processing large amounts of data. Today, filters and agents provide users with information relevant to them. Most websites today are accessed via search engines that allow users to identify relevant information through search terms. And since there is so much information out there on so many websites, those that maximize usability and user experience will likely be winners in user retention – the real capital of many websites. Irrelevant or hard to retrieve information will only serve to repel users from web services. With relevance being key, suppliers of intelligent systems will continue to be heavyweights of knowledge. One should look no further than Google or Wikipedia as examples of successful agents and filters. Other important information services include RSS feeds and other means of staying up-to-date on new information as it comes online – in real-time.

This is the first part of a four part blog post series about the future of the real-time web.

The history of communications and information sharing has been overarched by an ever increasing acceleration towards real-time interaction. This shift is exemplified in the evolution of printing. Johannes Gutenberg’s 15th century breakthrough printing technology was used in the beginning to produce copies of the Bible (referred to as the Gutenberg Bible), one might say in order to share a collection of narratives, reflections and commentary on events set, at the very latest a millennium and a half before its production. The dissemination of printing technology led to the production of more and more current media from official government bulletins circulated in some centralized empires to the invention of daily newspapers, via printed periodicals, in the early 17th century. Emergent communications technologies such as telegraph, radio, television, computers, and the internet have since exponentially sped up the trend towards real-time diffusion of information as the time between emergence, or occurrence, of events and dissemination of the related information became shorter and shorter.

The advent of social networking websites, blogs and the availability of such media in a mobile context, enabled by increased miniaturization, sophistication and relative cost effectiveness of gadgets (such as mobile phones, cameras etc…), has allowed for images and information of important public or private events, including natural disasters like earthquakes, political events like election results, or the emergency landing of a commercial airliner in the Hudson River, to be published on the web before even traditional media houses can. As we venture into the future everything becomes faster, both our private day-to-day lives and business-related communication! We are moving to a real-time era, and here’s how the web supports this shift.

The Real-time Technology: Technology as an Enabler

As with the printing revolution in the 15th century, technology is a driver in the shift to the real-time paradigm. The development of the internet layed the foundation for the quick transfer of information of various formats: text, images, audio data, and even video files. Today the development of high bandwidth internet connections, mobile broadband, multiple-core processors and other technologies mean that users have not only faster access to data but can process even more of it more quickly (e.g. HD video). This has enables many of the modern applications that rely on almost instantaneous transmission of large amounts of data. Cloud computing, whereby technological capabilities are maintained off premises and delivered on demand via the internet, enables users to access supercomputing power via technologies such as the computational answer engine Wolfram Alpha to answer even the most convoluted equations within seconds using an active internet connection. An example of cloud-based applications is Spotify, a music streaming software-as-a-service that allows users to store music in the cloud, meaning online. Whereas in the past music collectors had to physically collect music through vinyl and CDs, the internet revolution allowed for a huge amount of music to be downloaded into the finite and relatively small dimensions of a hard-disk. The catch was always having to download and, oftentimes, document one’s collection. Now, the music is already ready for you to stream within seconds whenever you please – in real-time.

Storyboarding How-To

Storyboards can be created from (usually smaller) sheets of paper, post-it notes, using a white or black board, using office software programs, or using a more specialized software program. A storyboard does not usually require a high level of artistic detail; instead it should only focus on details that are relevant for the interface design of the website. Thus, a storyboard can be built with simple shapes, such as basic line drawings. In some cases, simple wireframe prototypes can be used for storyboarding purposes. There are a few wireframe tools that even allow for wireframes that look hand-drawn. For optimal results, keep the following basics in mind while creating the drawings of your storyboard:

1.    Website navigation: Include the buttons and links that users will need to find their way through the website.

2.    Content sections: Don’t waste time on details, rather focus on how you plan to present the relevant content areas?

3.    User login boxes: Some websites have a login section. Include it if it’s relevant.

4.    Search boxes/engine: How do users of the site find relevant information?

5.    Page connections: How do individual pages of the website relate to one another?

Simple storyboards allow you and your clients or prospective users to focus on the important aspects and the usability of the user interface and not on details, such as graphics, color, fonts or other design characteristics. Thus, when creating a storyboard prototype, focus on the fundamentals first. Solid fundamentals usually trigger innovation in later stages of the web design process.

In this two part blog entry I shall explain storyboarding in the context of creating an interface design for a website. This blog post may be of interest for anyone interested in designing a website and is looking to gain more knowledge of how storyboarding aids the development process. Part 1 will focus on the basics and benefits of storyboarding while part 2 will go into some handy tools and resources.

Storyboarding Defined

Simply put, a storyboard is a series of sketches that allows one to visualize and organize content in films, narratives or interactive media, such as websites. Storyboards can be considered a kind of usability prototype that can help outline the structure and configuration of a website or clarifying a certain use case scenario. Storyboarding is the action of creating and using a storyboard to design a websites with a great usability or user experience by breaking down its individual aspects to identify critical functions, navigation paths, and other areas for potential improvement based on the perception of optimal usability from your user’s perspective. One might say that storyboarding can be used to create a blueprint of a website.

But even if screen designs have already been made in some hi-fi graphics software (e.g. Photoshop, pidoco° can add value to the process by bringing interactivity to static screens. Adding ‘click areas’ to the finished screenshots enhance the collaboration and interaction capabilities of a former static screenshot. Colleagues, clients and test users can now easily be integrated in the designs process and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!

What are high fidelity wireframes?

In part two of this blog we shall have a closer look at high fidelity and other kinds of wireframes. Although sharing many of the same advantages with low-fidelity wireframes, a distinction between the two is that a high-fidelity wireframe is closer in design to the true representation of the final user interface. This is because high fidelity wireframes usually have slick and polished design features, even going as far as simulating an application’s work flow. Despite this high fidelity wireframes remain prototypes and usually require a lot of time investment to create which can be costly.

What are the benefits of high fidelity wireframes?

High fidelity wireframes usually are used in addition to and after low fidelity wireframes have been used to resolve the most impactful and fundamental usability or interface design problems of an application. Being eye-catching, high fidelity wireframes can be used to impress clients who have to sign off on a concept quickly. A high fidelity wireframe in this case would intuitively be faster for users to understand simply by glancing at them, leaving less room for misinterpretation. This is advantageous when designing complex user interfaces with lots of interactivity. In terms of your development team, high-fidelity wireframes allow you to collectively bring an interface to life. This helps in keeping a project’s budget manageable further satisfying clients.

What are medium fidelity wireframes?

It is worth noting that some people make the distinction of adding a third category; medium-fidelity wireframes which lie somewhere in between high and low fidelity wireframes. These are especially useful in larger projects when interface design fundamentals have been worked out, but more optically detailed representations are needed for pitches, presentations etc…

[Read more →]

The pidoco° screens design software consists of three main entities which complement each other perfectly. They speed up the interface design process and optimize the general workflow in all stages of interactive web design.

Clickable wireframes are quickly sketched with the Prototype Creator (just by drag&drop) and can later easily be shared and reviewed by colleagues, test users or clients. If there is need for even more in-depth feedback on individual aspects of the concept sketches, just use the digital prototypes to perform a plug&play remote usability test where moderator and test user are connected remotely by a shared screen and an integrated phone. All modules are aimed to increase productivity of the interface design process and ease communication within the team.

But even if screen designs have already been made in some hi-fi graphics software (e.g. Photoshop, pidoco° can add value to the process by bringing interactivity to static screens. Adding ‘click areas’ to the finished screenshots enhance the collaboration and interaction capabilities of a former static screenshot. Colleagues, clients and test users can now easily be integrated in the designs process and online discussions can be held. Just like web conferencing, but with real-time editing never seen before!