Boorish behavioral patterns

To many coders, application development is the more glamorous part of software development, as compared to building the user interface for the same. What most of coders ignore however, is that to the end-user, the user interface IS the system. And what most end-users want is a system, which is functional, intuitive, easy to use and has sensible defaults. Humans during their evolution from cavemen to the current society have come up with a number of rules, governing various aspects of social behavior. These are the rules that are commonly referred to as social manners. We argue that a large number of the behavioral patterns classified as “good manners” apply to software application interfaces also. Consequently, user interface designers who tend to ignore “good manners” run the risk of making their applications as bad or rude software citizens.

But what are good manners? Simply put, good manners can be summarized as show consideration, respect and care for others.  It is somewhat surprising then that, whereas most of the creators of various software and web applications are well behaved and possess good social ettiquettes, some of their creations are truly rude and obnoxious in their interactions with end-users. It seems that many computer applications do not follow the basic tenets of social interactions which are common knowledge. The disconcerting fact is that some of the usability issues that underly such rude behavior has been identified and understood for decades.

Some examples of rude interfaces are summarized below:

1. Irrevocable Steps: This typically refers to instances when the system decides to take some irrevocable steps, with or without user consent. Automatically applying patches and rebooting the system is a concrete example. This is seen on windows environments, wherein the OS is configured to automatically download some patch from windows update without informing/intimating the user, and after the patch is installed, auto-rebooting the system. This is the physical equivalent of your futuristic car deciding to clean itself, suddenly change directions from your current destination to the carwash, throwing all the users out of the car and washing itself.


2. Pushy Behavior: Application developers want end-users to use their software as much as possible. But when their desire to promote their software to desktop users translates to the software adding itself in a number of places, including the startup menu, desktop icon, task bar, right click context menu and changing the default application for a number of file types to use itself, it can be termed as pushy behavior. Real player, and before that Paint Shop Pro was notorious for such behavior.


3. Pot calling Kettle black: While doing application design, it is the responsibility of the programmer to not just anticipate, but even expect incorrect inputs from the end-users, who often are not technically savvy. In a lot of cases, however, instead of designing the software to be robust and fault tolerant, the programmers blame the end-users via vague and rude error messages. An example of such is when the application attempts to confirm some obvious condition from the end-user eg - The infamous DOS error Abort, Retry, Fail?


4. Cryptic error messages: The HTTP status codes comprise of a list status codes that webservers return as a response for any HTTP request. In fact, all the HTTP status codes are very terse and to-the-point, but what is more puzzling is when website designers directly throw these cryptic error messages to end users. A very common example is, when a web server throws a “404 - page not found” error. It is fairly trivial for the website designers to put out a more graceful error message, or even re-direct it to a generic error page having a more polite error message.


5. Threatening error messages: These are error messages that threaten the end-user with some sort of destructive behavior (typically data loss). That this is a very rude behavioral pattern for the application goes without saying, but what is worse is that the programmer has anticipated the condition that causes this error message, and instead of fixing the root cause, added a threatning error message to the end-user. eg - “Continuing with the operation may cause permanent data loss and cannot be undone. Yes/No?”


6. Contract breaker: Windows GUI applications (typically) have a contract with the end-user that exiting the main window will close the applications. Applications that fall in this category satisfy the exit contract but keep running in the background hogging memory or CPU. Adobe is a prime example of such behavior.

We will be exploring some more such examples and analyzing their underlying patterns in upcoming posts. Please watch this space for more details.

Simplicity Principle

SIMPLICITY.

We saw few examples and points on one of the principles of user interfaces - structure. This features focuses on Simplicity.

Why do you need your site to be simple?

Site visitors will rarely visit your site to "enjoy" the design. The design should be very transparent and complementary to the content. From the visitor's point of view, the best design is pure text that echoes the content they're looking for. Nobody really has the time and patience to interpret your design. Remember, the complexity and abstractness that some design concept introduces does not command any appreciation for the hard work that's perhaps gone into creating the design. Strive for simplicity - easy to comprehend layout and text.

How can you achieve simplicity in your web site?

The idea is to achieve a perfect blend of details and their presentation on screen.

• Use graphics sparingly and meaningfully; also make sure it's light on size.


• If short text is sufficient, avoid having complex wordings. For ex: Use "Search" instead of "Quick Keyword Search" for your search functionality.


• Use suggestive and direct icons that are consistent with web terminology and use less space on screen.


• Use colors and fonts sparingly.


• Do not use jarring animations and advertisements.


• White/Blank Space is underrated; use it effectively.


• Use elements that work consistently across all browsers (HTML + CSS); avoid elements that cause issues across different environments (JavaScript, Flash).

Few examples of Simple web sites:

• blejskam


• enso


• artypapers


• distinct


• symphony cms


• opened hand


• jgm


• open communications

KISS philosophy has been around since the dawn of web site design. KISS does not mean boring and dull sites. It is possible to create great looking sites and still keep it simple using simple techniques, as exemplified in the above list of sites. Concept of simplicity is more complex than it may seem; but achievable.

Stay on for more discussions and examples on principles of user interfaces.

Structure Principle

STRUCTURE.

In my blog post, Principles of User Interface Design, we touched on various aspects of user interfaces. This feature will discuss few specific points of one of the aspects - Structure - followed by few examples.

Why do you need your site to be structured?

Well, you need your customers/prospects to understand quickly what need of theirs will your product/service fulfill. It is important for the visitors to find relevant information quickly, and get easy access to additional information if necessary. Your public domain, which is the place for introducing all that you do, can and will change in the future. Having a good and expandable structure would make this job easy and seamless. Having a good structure (which also means not random, but structured set of keywords) will also make the site findable on search engines. The customer also needs to have alternate paths to key areas and information on the site for better decision-making.

How can you achieve structure in your web site?

Main idea is to establish the information architecture for site content areas in providing clear, visitor-specific paths to useful and relevant information.

• Internal site linking structure - have logical grouping/linking between main navigational elements (either left or top) and secondary/direct navigation (right, center, or bottom).


• Linking between sections - have good cross-linkages and quick jumps to important sections of your site (for example: customer stories, case studies, thought-leadership blogs).


• Page-specific navigation - it is not a bad idea to design page-specific navigation and access to information. In fact, each page has to serve a specific purpose and it's a mistake to have all pages behave the same in a large site. For example, "About us" section needs to be very different than a section about "Products/Services" not just in presentation and writing style, but also in flow.


• Keywords as sections - site visitors will feel at home with the structure of the site, if we make user keywords as section names.


• Site Exits - design specific click-to-action elements for a logical exit from your site. For example: Inquiry Forms, Downloads, Feedback, Sign-ups, Share/Like.

Few examples of sites with good structure:

• mozilla


• vector consulting


• protolize


• sumagency


• greenpepper


• bearskinrug


• bbc


• usa gov


• abebooks


• rotten tomatoes

Structure it now; structure it well.

Stay with us for more features on other principles with more examples.

Reasons for Branding Usability Revamp

Branding and Usability

The visual identity created for a brand translates the brand strategy into clear, distinctive messages. Strategic identity stems from the core values of the company, expressing a consistent and unique vision. This ensures strong associations in the mind of the customer, inspiring trust and respect in the long term; beyond the life of any single product or service.

Rationale and Advantage

• Bring out Conceptual Message and USP


• Fulfill business inquiries with ease


• Reduce maintenance costs


• Increase customer satisfaction


• Grow competitive advantage


• Eliminate over design


• Increase accessibility to relevant information


• Increase sales and revenue


• Share right content in the right form


• Showcase Products, Solutions, Services, and Customers

It is far too important for your brand identity and brand strategy to be consistent and complementary. Make sure you use your public domain (logo, web site, social media, blogs, etc.) in high synchronization with your brand. Knowing your current and future audience (customers, employees, partners, investors) is very important while achieving consistency in branding revamp.

Good luck!

Principles of User Interface

This article simply lists down in brief the few principles that need to be adhered to and kept in mind, while creating or analyzing user interfaces. Following this, we'll take a look at few examples for each points in question, as series of features.

Principles

• structure
  
  
  
  • organize user interface purposefully
  
  
  • make it meaningful and useful based on clear, consistent models apparent and recognizable to users
  
  
  • put related things together; separate unrelated things
  
  
  • differentiate dissimilar things, make similar things resemble one another
  
  
  
  


• simplicity
  
  
  
  • make simple, common tasks simple to do
  
  
  • communicate clearly and simply in user's own language
  
  
  • provide good shortcuts that are meaningfully related to longer procedures
  
  
  
  


• visibility
  
  
  
  • keep all needed options and materials for a given task visible
  
  
  • do not distract user with extraneous and redundant information
  
  
  • do not confuse user with too many alternatives for performing same task
  
  
  
  


• feedback
  
  
  
  • inform actions or interpretations
  
  
  • inform changes of state or condition
  
  
  • inform errors or exceptions
  
  
  • keep model of communication - relevant, clear, concise, and in language familiar to user
  
  
  
  


• tolerance
  
  
  
  • reduce cost of mistakes and misuse by allowing 'undo' and 'redo'
  
  
  • prevent errors by tolerating varied inputs and sequences and by interpreting reasonable actions
  
  
  
  


• reuse
  
  
  
  • reuse internal and external components and behaviors; maintaining consistency with purpose
  
  
  • reduce the need for users to rethink and remember
  
  
  
  

Watch this space for some concrete examples...

SAP R/3 Customization with GuiXT

Preamble

This feature examines some of the major challenges faced by industries running on SAP in leveraging their staff and existing investment in an era of constrained budgets and expanded demands. The article is predominantly written from the perspective of the C level executive with some reference to the technical, distinguishing points of the solution. GuiXT product suite is very innovative and readily delivers 4 key economic advantages:

• Reuse of current investment;


• Simplification of increasingly complex business processes;


• Increase in productivity; and


• Lower maintenance costs.

We describe some of the challenges created by the current trends in ERP implementation, specific to SAP, and the potential solution.

Executive Summary

CIOs face the challenge of adapting to an increasingly complex software world with yesterday's tool sets. The Internet, e-commerce, internal integration demands, supply chain re-engineering, and customer relationship management are all contributors to the growing demands on today's developer. How does one deal with all this complexity and the difficulty in employing the necessary IT talent to successfully wade through this quagmire? Conceptually, the perfect system would be one in which we could reuse our software, describe software architecture so that a non-expert could successfully execute and simplify complex business modeling, and automate most user tasks.

Synactive is a products company, always at the forefront of technology since its inception, developing and providing user-friendly solutions, adding exponential value to customer businesses. Synactive GmbH is a member of SAP's Complementary Software Program. Their product GuiXT enables easy reuse of existing SAP investments.

GuiXT Software Suite allows corporations to adopt a user-friendly and intuitive SAP by introducing a modular scripting technology that dramatically increases productivity with its powerful automation and customization features. Web interactivity and external application interactivity with SAP is introduced; which takes business processes to an entirely new level. Repetitive processes cease to be painful with excessive data entry and navigation, and instead become automated and accelerated workflows. All of the above is  achieved without adding to or modifying the underlying business layer (ABAP code) of SAP. Core runtime engine of GuiXT is a part of SAP Front-end and hence is present at every client installation.

End users have realized in years that with complete training and adoption of customized processes throughout an organization, they experience total ROI gains for SAP's past infrastructure investment of 50% plus.

GuiXT layers into an organization's existing SAP implementation to seamlessly bridge together disparate technologies available for enterprise implementation. Most organizations have made significant investments in existing SAP model to achieve the benefits of user-friendly and intuitive interface to simplify their processes; however, these investments have not produced the expected results. This is because they are either difficult to develop using or they achieve the results by altering the business logic of SAP, making it difficult to maintain and change. GuiXT shields the developer from ABAP and allows them to focus on writing business logic.

Challenges

With ever increasing changes, CIOs of companies are acutely aware of the need to choose the right technologies that will enable them to remain agile and to respond rapidly to the changing demands of the marketplace. The pace is demanding with changing distribution patterns, globalization of commerce, and mergers and acquisition activity allowing little time for reflection.
Recently, the push has been for user interfaces to be simple, clear, and intuitive. Users want a system that is easy to learn and use, and is flexible. Challenges faced by CIOs of SAP customers are, having:

• User-friendly screens,


• Error-free and tedium-free data entry,


• Low training and maintenance costs,


• Automated business processes, and


• Integration with web and other applications.

GuiXT solutions have multi-dimensional value, which addresses and overcomes the aforementioned challenges, both in less time and less cost.

Reuse of current investment

With the growth of the Internet and interdependent software systems, the need to leverage existing systems has grown enormously. Call of the hour is ‘reusable’ systems. Solutions that are reusable and scalable to prevent or minimize costly upgrades would be ideal.

GuiXT solution not only ensures reuse of current investment, but also spares future recurring investments, in terms of training and retraining SAP users. Ease of use; scalability; reliability; manageability; and flexibility are some of the highlights of GuiXT solutions.

Solution Overview

You can use GuiXT components to implement a whole range of screen customization options. With GuiXT components, you can:

• Combine and consolidate SAP screens to reduce the number of screens users have to wade through; in most cases up to a single screen,


• Change the layout (i.e., refine terminology or delete/move screen elements) of any SAP screen to improve productivity and reduce errors in data entry,


• Add relevant documentation by integrating web based help within SAP Front end itself, and reduce training costs,


• Add automation driven by one-click process; hence simplifying the business processes.



Inside GuiXT Components

• GuiXT (Shipped with SAP GUI) – Allows you to change text and remove redundant data-entry fields in R/3 without touching core R/3 data. The runtime engine is bundled with SAP GUI.


• InputAssistant – InputAssistant allows you to streamline business processes by combining stock R/3 screens and transactions into a customized, personalized, error-free data-entry screen.


• Designer – Allows you to add or change R/3 text and remove redundant data-entry fields in R/3 by simple mouse ‘click-drag-drop’ operations, without touching core R/3 data. The result of the screen modifications as GuiXT scripts.


• Viewer – Allows you to embed any HTML or RTF page inside any R/3 screen for Help or Internet lookup.

Strengths

• Ease of use – Screen customizations are done using Designer, a WYSIWYG tool that empowers users to click-drag-drop elements in an editable SAP GUI screen.


• Scalability – GuiXT supports wide range of implementation sizes; from small businesses to large corporations. GuiXT supports R/3 installations 3.x to 4.x.


• Reliability – Since GuiXT is bundled within SAP, it eliminates the need of any additional development activity within SAP.


• Manageability – Personalization and customization are script-driven. GuiXT scripts (simple ASCII text files) can be stored and managed within R/3 database.


• Flexibility – Once GuiXT is activated, all SAP transactions become candidates for simplification and personalization. All it takes is additional GuiXT scripts.

Benefits For Users

• Intuitive R/3; Easy to understand and use


• Process automation; Minimal errors


• Tedium-free; Smart and quick data-entry


• Huge time savings; Allows them to focus on their actual tasks

Benefits For Management

• Proven and scalable (bundled by SAP AG)


• Data consistency and integrity


• No ABAP necessary; Ensures swift implementation


• Transparent deployment


• Low cost; Less training for users


• Error-free, streamlined processes; Increased productivity

For further details, you can visit: GuiXT Site and get in touch.

Business Applications Usability & Recurring Benefits

In your business environment and the spread of IT landscape comprising of huge distributed business applications like ERPs, what are your primary goals when it comes to assessment of the entire system metrics?

Primary Goals

• Reduce training time and increase user comprehension;


• Increase productivity, efficiency, and data integrity;


• Increase speed, ease of navigation, and ensure a comprehensive data footprint.

Depending on specific platforms and technologies in use, without compromising on their internal functionalities and rich features, what are the few generic and common customization approaches to achieve the above goals?

Few ways to achieve customizations in business applications

• Change standard terminology to those your organization's pervasive business terms thus eliminating ambiguity and uncertainty;


• Reduce manual data entry by automating redundancies;


• Rearrange your tabs, buttons, workflow elements and fields to match those of your internal processes;


• Hide unused workflow elements and fields and create validations for all of the fields necessary to achieve a complete set of mandatory data;


• Consolidate multiple tabs, screens within your workflows and create a streamlined and easy to navigate environment;


• Consolidate multiple workflows and shortcuts in a dashboard and one-click interface if feasible and ensure that users provide all necessary data and jump across relevant areas without expending extra effort.

A summary of recurring benefits

• Increase in productivity creates direct full time employee benefits thereby enabling a redeployment of resources to other areas of business;


• Increase in efficiency improves employee experience and reduces training and retraining burden from the company and management;


• Speed, clarity and easy navigation creates enhanced customer satisfaction and leads to more happy and reference-able clients;


• Automation and validation reduces the time required to navigate through systems and ensures a more comprehensive data set for management reporting;


• Consolidation and streamlining creates a cleaner and more scalable environment that is more conducive to retention of existing workforce without the need for additional resource expenditure;


• Survival of enhancements through upgrades ensures that your investment is preserved and additional resources are used for additional enhancements;


• Ease and speed of deployment ensures that you can create a multitude of enhancements in a very short time with near immediate results.

Thoughts?

Techniques/Guidelines for User Interface Creation

GRAPHICAL USER INTERFACE - visualizes complexity to make confusing and business technology issues clear, concise and concrete; helping people to make better, faster decisions, leading to action and results.

We've discussed examples of many principles and concepts of usability and user interface design in the previous blog posts. This feature lists down several concrete techniques and steps to be followed while creating a user interface. Future posts will cover most of these guidelines in depth with live examples.

• Consistency
  
  
  
  • Buttons/Menus in consistent places on all screens
  
  
  • Same wording in labels/titles and messages
  
  
  • Consistent color scheme
  
  
  
  


• Standardization
  
  
  
  • Setting standards and sticking to those; for example: Agile Modeling Standards
  
  
  
  


• Holding the line
  
  
  
  • Control over “unusual ideas” on how the screen should look like, by re-iteration of corporate goals, application needs and standards
  
  
  
  


• Explanation of rules
  
  
  
  • Application to “explain” rules to end-users to perform their tasks
  
  
  
  


• Navigation (external)
  
  
  
  • Easy access to relevant functional screens, from all screens
  
  
  
  


• Navigation (internal)
  
  
  
  • Co-relation of logical eye movement of user and the functional flow within a screen
  
  
  
  


• Terminology
  
  
  
  • Text (primary source of information for users) – proper choice of words
  
  
  • Less abbreviations; more complete words/sentences
  
  
  • Informative error messages
  
  
  
  


• Understanding UI widgets
  
  
  
  • Right widget for the right task
  
  
  
  


• Drawing parallel
  
  
  
  • Looking at other similar applications for standards/guidelines of usability
  
  
  • Avoiding imitation of user interface
  
  
  
  


• Color
  
  
  
  • Sparing use
  
  
  • Secondary indicator
  
  
  
  


• Contrast Rule
  
  
  
  • Dark text on Light background
  
  
  • Light text on Dark background
  
  
  
  


• Alignment
  
  
  
  • Organization of UI elements (left justified, right justified, etc.)
  
  
  
  


• Expecting mistakes
  
  
  
  • Designing for users to recover from their mistakes
  
  
  
  


• Intuitive design
  
  
  
  • Empowering users to make educative guesses for using the application
  
  
  
  


• Evolutionary approach
  
  
  
  • Mock-up, prototype leading to final output
  
  
  
  


• Grouping
  
  
  
  • Grouping logically connected items
  
  
  • Separating disconnected items
  
  
  
  

Remember, in order to reduce operating and opportunity costs, it's better to build it right the first time. More to follow on this subject...

Confusing Interface (Dilbert)

Usability Characteristic: "Easy To Learn"

The last feature in Usability Characteristics. An easy to learn site/product is one that supports both the initial orientation and continued learning throughout the complete lifetime of use.

Most usability exercises applied to sites and products achieve an end result that assures low entry barrier, i.e., initially easy to learn. However, very few result in having the same ease of learning in a sustained usage. In other words, we need to exercise usability in anticipation of future directions of the product to see that it's not just easy to learn, but easy to master as well.

Few examples of products that are easy-to-learn:

• google sketchup


• solidworks


• yahoo! messenger


• adept tracker


• microsoft sql server 2005 express


• neopaint


• alice


• real software

Generally, easy to learn interfaces allow users to build on their prior knowledge. Also, it allows them to build on any interaction patterns they have learned through use in a predictable way. Consistency in user interfaces drives predictability. Software products that achieve and maintain consistency even across years of upgrade are the easiest to learn and master. For instance, keeping terminology unchanged, having design elements and controls in familiar location, maintaining similar behavior for similar functions, and so on. Users see what they expect to see. This philosophy lays the foundation for the process of user observation and task analysis, leading to superior usability and user experience from a learning angle.

Watch this space for more discussions and guidelines around usability.

Usability Characteristic: "Error Tolerant"

Error Tolerant User Interface.

Your site/application ideally needs to prevent user errors and provide easy means to recover from them if they occur. This characteristic is also far too critical to be ignored or taken lightly. For achieving this, your current site or application may need a strong revamp, focusing on all critical tasks and paths of the user; the steps involved; the language used; alternate and recovery paths available; error message structuring; guiding tips and instructions; memory features; and so on. Basically, everything that makes the intended audience to explore and make optimum use, without fear - about loss of time and effort.

An error-free system, while being the ultimate desire, is far from being a reality. It may be far more usable, if the system considers comprehensible error-messages as part of its user interface, and with possible inclusion of a clear description and direct links to correct the problems. Some guidelines based on Whitney Quesenbery's theory and research, to make your interface error-tolerant are:

• Make it difficult to take incorrect actions; Design links and buttons to be distinctive, use clear language, avoid technical jargon, and make dependent and relevant fields appear together


• Make it difficult to take invalid actions; Limit user choices, provide clear examples for data entry, present appropriate navigation options


• Make it difficult to take irreversible actions; Provide back-tracking capability, provide undo/redo, avoid dead screens, don't indiscriminately use confirmations


• Plan for the unexpected; Allow user to add new entries, take exceptional routes through the interface, make choices you did not predict

It is important for the interface to be polite about correcting mistakes that typical arise from lack of foresight - that of the designer/developer.

I'm hunting for some good examples to add to this post, as done in my previous features. Feel free to contribute if you have any thoughts and suggestions. I'll update this feature with examples, very soon.

Next Characteristic: Easy To Learn.