Building great User Experiences
Coming from a web design background we all know that usability is an important factor for the user adoption of a website or web application. But I think, these issues should nowadays be rather hygiene factors and good businesses should focus on the overall user experience, since this is what gets people talking and what multiplies success. But let’s take a look at the usability first.
Components of Designing Usability
Usability Design spans several dimensions we want browse though briefly, which are: taxonomy, interaction design, visual design, user feedback and content.
Taxonomy: focuses on the consistent classification of content, navigation and user orientation. Does the user know where she is at all times? Does she have ways to navigate to different areas of the website and is it clear by which clicks the user can complete a task (e.g. find something)?
Interaction Design: takes care of a consistent use of UI patterns and site components and aims to minimize the learning curve and to increase accuracy and efficiency of a task. Good interaction design ensures an always comprehensible user interaction and reduces frustration on the side of the user.
Visual Design: is aimed at optimizing the visual communication between user and website (or website’s content). Visual design communicates the underlying site’s structure to the user, pointing out relevant information or interaction artifacts at the appropriate time in the process. On a more general basis this manifests in graphic design standards (aka. style guides) and branding guidelines for a website.
Content: reminds you that even if you have perfect navigation and high usability, it all doesn’t help, when there is no relevant content. And relevant means a) there is everything, users want (including help sections and support pages) and b) that the provided content does match the expectations and is helpful.
March 23, 2010 No Comments
Limitations of Heuristic Evaluations
In a heuristic evaluation, experts are sometimes ‘overly critical’ and provide only feedback on the problematic aspects of the interface, as this usability method really focuses on mistakes and not on overall feedback (positive and negative).
Although experienced in the field of (interface) design, your ‘experts’ need to have at least some experience with heuristic evaluation and must consider things like having the appropriate target audience in mind when judging the design of your site or interface.
And, of course, this is a purely qualitative usability method and can only provide a guide line based on usability best practices but does not substitute (rather complement) quantitative user tracking when the project is finally in use.
Conclusion about the Usability Method Heuristic Evaluation
Heuristic evaluations are the perfect usability method for testing and reviewing design concepts in a very early stage of a project (e.g. on a wireframe basis). Thus the feedback comes at the right time (before detailed design or even programming has started), still being possible to be considered in the next design phase. And with a heuristic evaluation you collect a lot of helpful insights to create customer centric design with rather limited effort.
Readings and Recommendations
To perfectly enable heuristic evaluations in an early stage of your project, interfaces should be sketched with a wireframing tool. Some of them even have the technical solution integrated to conduct heuristic evaluations remote via internet. Just google for things like “usability wireframe tool” .
March 22, 2010 No Comments
SaaS Applications on the Rise
Software as a Service (SaaS) applications offer many advantages compared to traditional desktop-style applications. They include reduced upfront investments and roll-out costs for hardware, power supply, cabling and expensive software licenses, as well as lower ongoing maintenance costs like hardware maintenance, power and cooling, backup and policy management, archiving, security and updating of the software itself. Basically, SaaS applications free an organization from the effort necessary to create, develop and sustain the infrastructure, thereby freeing up resources for focusing on the core business.
Another key benefit of many SaaS applications is their ease of use. Since SaaS applications are often used in different ways than traditional applications, their user interface design often focuses more on usability than the GUIs found in traditional applications. Working from a mobile location or even accessing an application with a mobile device such as the iPhone or the iPad, for example, turns out to pose significant challenges and special requirements to the interface design of SaaS applications. (By the way, have you ever tried to use Pidoco’s rapid prototyping and wireframing software on your iPhone?) Hence, simpler screen designs, optimized workflows and a clean user interface make SaaS applications easier to work with on average. That not only increases productivity, but often reduces the need for expensive training and user support of a company’s workforce.
Some debate has focused on the question of whether in the long-run costs for software-as-a-service applications are lower than for traditional applications due to the ongoing subscription fees. Yet, thus far, it seems that these concerns have not been an obstacle to the growth of online applications such as the rapid prototyping software Pidoco offers for wireframes and interface design. In fact, the cost and time initially saved by not having to install and maintain SaaS applications by far seems to outweigh concerns on the subscriptions.
As a matter of fact, statistics by Gartner show that enterprise SaaS sales are expected to top $14.8 billion in 2012 and grew by 27% in 2008 alone. So despite all debate, there is quite some
potential in software as a service.
DreamSimplicity.com recently delivered a list of 10 SaaS companies to watch. It includes:
• Coupa for spend management in big and small enterprises
• MyOnlineToolbox, a construction estimate and invoice software
• Gist for building strong relationships by connecting email inbox and web
• Accept for idea and portfolio management in innovative industries
• Apptio for IT financial management
• Jobvite, a job recruitment software
• Nextbio for knowledge management in research-based organizations
• Sonian, a data management software
• HealthHiway for patient data management and billing
• and OptionEase for fair market value accounting and compliance.
Next to the usual suspects like Google Apps, Salesforce or Zoho, which all fall into the messaging, conferencing, collarobation or CRM group, this is a very nice compilation. I personally would add Pidoco to the list as well, not only because wireframes or rather wireframe tools are becoming so important these days, but also because interface design has never been more collaborative than with clickable wireframes by Pidoco. You can try it out at www.pidoco.com.
March 19, 2010 No Comments
Prototyping 2.0 – Digital Interface Prototyping. Part I
Developing user-centered software applications is a dynamic and iterative process of designing and testing. But given the fact that the drafted interface concepts might be overhauled anyway after testing, the trade-off between creating high-fidelity prototypes and investing as little time as possible in something that will be thrown away has to be made.
This trade-off really asks for a fast visualization method and therefore some clever designers and programmers invented Rapid Paper Prototyping. Quick and dirty interface prototypes are sketched with pen and paper to be tested (and re-designed) with all the limitations physical paper brings along.
But today, in the digital age, Rapid Paper Prototyping has grown up! The era of digital interface prototyping has begun. With digital wireframing tools you can create interface mockups by drag and drop from prefabricated stencils (elements like checkboxes, navigation bars etc.). Unlike paper, these digital interface prototypes are completely interactive with animated navigation, real type-in form fields and linking between all pages through buttons and text links.
Advantages of Wireframe Software
The advantages of such a wireframing software are obvious: through the interaction features you get a much better impression of how your concepts work with the user and whether all possible use cases have been considered. Findings from user tests can be applied easily since the interface sketches are not fixed forever on paper, but interchangeable with re-useable layers, stencils and link references. And those already mentioned prefabricated stencils accelerate the sketching of interface concepts even more.
Being digital or even completely web-based, some interface design tools also allow you to perform remote user testing through expert reviews and one-to-one user tests with shared screens and integrated audio/video communication. The test sessions with all annotations can be documented right within the tool (in case of the one-to-one test session they get recorded on-screen) and a specification can be exported as Word doc.
March 17, 2010 No Comments
Wireframing and Real-time Collaboration
The pidoco° wireframe software consists of three main entities which complement each other perfectly. In combination, they accelerate the interface design process and optimize the general workflow in all stages of interactive web design.
Animated and interactive interfaces 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 wireframes, just use the clickable wireframes to perform a easy to set up 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.
March 16, 2010 No Comments
Our Conclusion: Better than Paper
Our conclusion of Rapid Digital Prototyping: It’s got the look and feel of pen and paper, but adds interactivity (making wireframes animated) and accelerates developing speed through re-usable elements and layers. Many (real-time) collaboration components enable interface designers to new ways to work with much better time allocation, leaving more time for the creative process that really counts.
From Rapid Paper to Rapid Digital Prototyping
Through prefab screen elements (e.g. radio buttons, links, navigation items, controls etc.) information architects can create clickable and animated web or software interfaces within minutes. Without any programming skills, interface designers can focus on the web concept and use cases, site structures and the overall layout of the site, instead of getting lost in details that will later be overhauled anyway.
March 13, 2010 No Comments
Real-time Collaboration
But even if screen designs have already been made in some hi-fi graphics software (e.g. Photoshop, pidoco° can add value to the work flows 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!
March 11, 2010 No Comments
From Rapid Paper to Rapid Digital Prototyping
Through prefab screen elements (e.g. radio buttons, links, navigation items, controls etc.) information architects can create clickable and animated web or software interfaces within minutes. Without any programming skills, interface designers can focus on the web concept and use cases, site structures and the overall layout of the site, instead of getting lost in details that will later be overhauled anyway.
March 10, 2010 No Comments
Getting Wireframes interactive and collaborative
The pidoco° screens design software consists of three main modules which complement each other perfectly. In combination, they accelerate 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 use cases, 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
March 9, 2010 No Comments
News from the Google Labs: What’s above “the fold”
Have you ever wondered what the majority of people (okay, the majority of Google users) see of your website? If you have no complex tracking in place or want to make decisions on the basis of a really statistical significant number of users, Google has launched a new Labs application for you: Browser Size.
On browsersize.googlelabs.com, you can just add a URL (any URL) and let Google show you what of the site’s content can be seen by what percentage of users (depending on their browser size).

As we all know, the browser size is reduced by tool bars and other browser plugins – so your web tracking does not necessarily tell you the true screen resolution. With Google’s Browser Size instead, you see much clearer. For instance you can see that around 90% of the users surf with a visible browser resolution of 975 x 510. That’s neat and has, of course, implications on where to place what kind of content on your site.
So what do we do with this information about the fold?
An answer to that might be found in Milissa Tarquini’s (boxesandarrows) article “Blasting the Myth of the Fold”. There she proclaims to stop worrying about the fold at all, since when giving enough clues that more compelling content in following when you scroll down (which is much better than clicking), users will do so! But with Google Browser Size you now know where the fold is and where you really should place your clues (e.g. cut-off pictures) for more relevant content!
March 8, 2010 No Comments

