On mobile devices, interface design challenges steer users towards dedicated apps

Today’s web browsers, enabled by always-on internet and the cloud computing model, can be used as a conduit for all ranges of applications unthinkable when Mosaic, which would morph into Netscape Navigator, debuted. According to TheNextWeb article, the tide is starting to turn in favour of native apps again. Chief reason for this is the rise of smartphones and their respective app stores. To make his point the author uses the example of Twitter which is used 81.43% of the time through an app rather than the website.

Even on the desktop apps like Spotify, the music streaming app, eschew the web browser save to entice visitors to download it. However for every Spotify there are more, such as Grooveshark and Last.fm that deliver their services through their website. The web browser, reliable connection permitting of course, still holds a number of advantages. Web browsers are ubiquitous and come bundled with almost every computer regardless of operating system. The cloud also offers the advantage of availability. Sure, apps like Spotify and Steam, the video game delivery app, can be signed into from anywhere in the world but you have to go through the hurdle of downloading and installing them first!

According to the Nielsen Group’s iPhone usability studies, users prefer using dedicated apps than using a browser. From a usability and interface design perspective this is understandable due to the nature of small screens on smartphones whereby the interface design of mobile browsers is severely restricted by the size. This, of course, requires a rethink of interface design hence mobile optimized websites and apps.  On the desktop, meaning most computers, the browser remains king.

To be fair the thesis put forward by Boris and Adam Richardson does not try and play Nostradamus and predict the day when web browsers will become extinct but rather browsers will become more and more invisible, perhaps echoing Dan Norman’s seminal concept of The Invisible Computer. Nevertheless, with cloud computing conquering the business world, such as Salesforce’s CRM software, Google’s Docs office software, or Pidoco’s wireframe software, the web browser will for a long time still be very much in use, even if less visible.

I wrote this blog post inspired by an article by Boris on TheNextWeb in which the author pronounced “The death of the website” after paraphrasing Adam Richardson’s “the death of the browser” pronouncement. Both pronouncements are arguably astute but I wanted to add further comment regarding what they mean for interface design.

Things, as the old adage goes, come and go in cycles. The same goes for the world of software applications. Before the World Wide Web took off, software on PCs mostly got there by way of a native software application.  You had specific programs on floppy disks and you’d install the ones you need. One type of application, the web-browser, would prove to be the single-most versatile app of all. Whereas native apps tended to fulfil a clearly defined task such as desktop publishing, email, or spreadsheets even, the web browser would rise to be a swiss knife of sorts.

This is the second part of my 2-part blog post on design patterns in interface design. In the first part I looked at what design patterns are and advantages of using them. In this part I shall look further at the types and examples of design patterns as well as some potential drawbacks.

What are the different types of design patterns?

Design patterns are generally subdivided into three categories. Creational patterns are design patterns used to create objects that suit a number of software programming scenarios and mechanisms. Structural patterns are design patters that are concerned with the relationships and interactions of entities in your interface design. Structural patterns often deal with the functionality of your interface design. Behavioral patterns are design patterns that recognize common communication patterns between objects and realize these patterns. Recognizing these patterns makes communication more flexible and fluid during the design process. These patterns are exemplified by communication algorithms within or behind your interface design, or any commands that you may want your interface design to allow the user to execute.

What are examples of design patterns used in the interface design of websites?

An example of design patterns employed in the interface design of websites is Account Registration. Design patterns include best practices and can help prevent faux pas to watch out for when designing your website’s account registration process, such as not having a consistent design for the login and signup buttons as well as not making the said buttons easily identifiable. A design pattern would also tell that after a user logs in you should return them to the page they came from such as redirecting users to the comment form. Another example of a design pattern used in interface design is Tell-a-friend. This is used to enable users to share the content of your website with friends or anyone who might be interested with ease.

What are some drawbacks of design patterns?

Design patterns, like all methodologies, have been subject to criticism. Design patterns try to standardize what are generally accepted as best practices by computer scientists, information architects and interface designers. Standardization seems beneficial, but in practice it can result in the unnecessary duplication of code – a potential waste of time in your interface design. Using design patterns as a usability method in interface design can be difficult if one is not well versed with computer science. Although design patterns are not impossible to learn they may take some time and experience getting familiar with them in order to make the most of them. Yet, they may really be worth the effort.

In this blog post I shall look at design patterns as a usability method in 2 parts. In part 1 I shall look at what design patterns are and the advantages of using them in interface design.

What is a design pattern?

Design patterns are a useful method for the interface design of websites and software programs. One of the hallmarks of humanity is the evolution of our empirical collective body of knowledge that succeeding generations have built upon to get us, a relatively feeble creature, to where we are today. Anyone wishing to start a fire to prepare a meal does not have to accidentally discover fire first! In the same vein design patterns are a collection of solutions to typical problems encountered during the interface design of web sites and software programs. Over time these interface design problems have been documented and paired with solutions to assist all interface designers be they a novice or a seasoned professional.

What are the advantages of design patterns in interface design?

One of the ways of ensuring good usability in interface design is to always adhere to usability standards. These standards have been tried, tested and proven to work. Design patterns are there to assist you in solving the common problems encountered during interface design, including usability issues, thus enabling you to optimize your time much like a shortcut takes you to your destination faster. Design patterns sum up best practices and can be thought of as a template or guide that interface designers can use as a direct solution or a starting point to fine tune their interface designs.  Design patterns are also useful because they function as a code or standard that can be used by software developers, interface designers and other stakeholders to communicate and collaborate more efficiently. Novices can become accustomed to them and rely on their proven success, while professionals can share and show their expertise. Design patterns are also continuously being updated, tested and improved upon by an ever growing community of information architects and interaction or interface designers.

What are the benefits of paper prototyping in user interface design?

From a usability and interface design perspective, paper prototyping has many benefits.  Paper prototyping is easy and requires no technical skills, allowing people of all levels of technical ability to participate in the design process.  Paper prototypes allow you to critically examine their interface designs from the start, thus avoiding the need to fix usability errors later in the process when fixing is much more costly than drawing up a new prototype.

Paper prototypes also lend themselves well to rapid iterative development because you and your team can experiment with several interface designs that can easily be tested for usability.  The simple nature of paper prototypes can also make users feel more inclined to provide detailed and constructive feedback because they are not overwhelmed or intimidated by the paper prototype.

This blog post is the second in a series of two about scenarios of use as a usability method.

How to generate scenarios of use

Scenarios of use are not exceptionally difficult to craft, which makes them an attractive usability method.  Creating them, however, is easiest if you have a facilitator with strong communication and interpersonal skills—this helps boost group morale and creates an atmosphere that has a higher level of productivity.  When creating your scenarios of use, try to generate a number of scenarios that cover a wide range of circumstances, both positive and negative (the negative are called ‘misuse cases’).  You want to be sure to include misuse cases so you can investigate non-functional requirements such as the security and accessibility of your interface design.  You should go through all scenarios of use by yourself or with your group before you include stakeholders.

What are the 8 steps to developing scenarios of use?

According to Edward Kenworthy’s 1997 book Use Case Modeling: Capturing User Requirements the eight steps to developing scenarios of are:
1. Identify who is going to be using the website (this also works for other web-based, desktop-based or mobile applications).
2. Pick one of those actors.
3. Define what that actor wants to do on the site. Each thing the actor does on the site becomes a scenario of use.
4. For each scenario of use, decide on the normal course of events when that actor is using the site.
5. Describe the basic course in the scenario of use. Describe it in terms of what the actor does and what the system does in response that the actor should be aware of.
6. When the basic course is described, consider alternate courses of events and add those to “extend” the scenario of use.
7. Look for commonalities among the scenarios of use. Extract these and note them as common course scenario of use.
8. Repeat the steps 2 through 7 for all other actors.

What are the limitations of scenarios of use?

According to Alistair Cockburn, scenarios of use are an indispensable usability method, but they do not “take care of system design, user interface design, feature lists, or testing”.  Thus, scenarios of use can only assist you in laying the foundation for a great user interface design; scenarios of use help you hypothesize about your interface design, but they do not aid you in the actual feature design or edits of your prototype. Scenarios of use provide guidelines and suggestions only, but are still very useful because they help you identify the points in your interface design upon which you should focus design effort and subsequent usability tests.

Docs users can also chat in real time with collaborators as they evaluate spreadsheets, proposals, and other written projects. MindMeister specializes on online mind mapping and allows users to create, edit and share mind maps very easily and collaborate on them in real-time. Pidoco offers its users real-time collaboration possibilities as they create wireframe prototypes of planned user interfaces for web, desktop or mobile applications, including applications for the iPhone or iPad. Pidoco users are able to send collaborators links to their wireframes for editing and user experience feedback purposes and for conducting usability tests to improve the user experience of applications. These and other applications underscore the importance of web interfaces design that keeps in mind usability and time-effective functionality.

From the range of tools now starting to offer real-time collaboration capabilities, it is apparent that this modern form of team work is becoming increasingly important, especially as globalization, cross-border cooperation and outsourcing intensify. While real-time collaboration is useful in such general settings as creating text or spreadsheet documents, it can be seen from the examples above that many specialized areas are discovering the advantages of it. Web interface design, for example requires active engagement and feedback. In order for designers to stay competitive and relevant in the world of web development, they need to have the ability to collaborate with colleagues, clients and users in the fastest way possible. And similar arguments can be applied to many other fields where individuals and businesses try to be innovative in their processes in order to remain competitive.

A wireframe is a visual representation of the projected content of a graphical user interface that allow designers to test, refine and adjust software user interfaces to improve user experience and functionality. They are particularly useful in the collaborative process as they ensure that stakeholders can keep track of a project’s workflow. Special wireframe tools or wireframe software can support this process effectively. Wireframes come in either two main guises: low fidelity or high fidelity. In this blog I shall explore both types and their usefulness for user interface design, and more:

What are low fidelity wireframes?

Low-fidelity wireframes are wireframes that focus on the essentials of a user interface: layout, structure, Information Architecture – not design! Low fidelity wireframes evolved onto computer screens from rapid paper prototyping wireframes which emerged in the mid 1980s to become a popular Blue Chip company tool by the mid 1990s. Rapid paper prototyping involved the creation of rough drawings (sometimes drawn by hand) of graphical user interfaces as prototypes of software applications to visualize and test usability.

What are the main benefits of low fidelity wireframes?

1. Time: Eschewing many cosmetic factors, low fidelity wireframes are faster to create and thus allow you to quickly tackle fundamental issues regarding the usability of your interface. Suggestions and refinements can, also, quickly be incorporated into software prototypes for further fine tuning.

[Read more →]

The pidoco° screens design software consists of three main components which complement each other perfectly. They speed up the interface design process and optimize the general workflow in all stages of user centered 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 clickable wireframes, just use the clickable wireframes to perform a one-on-one 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.

Our conclusion of wireframing software: It’s got the look and feel of pen and paper, but adds interactivity (making wireframes animated) and enhances developing speed through re-usable elements and layers. Many (real-time) collaboration components enable interface designers to new ways to work with higher efficiency, leaving more time for the creative process that really counts.