CodePartners - Software Development - Dallas, Texas Software Development - Sage Accpac Customization - SageCRM Customization
Login
pay invoice online  |  remote assistance  |  
  • INTERNET APPLICATION DEVELOPMENT

    • Services
      • Web Application Development
      • Mobile Applications
      • Integration Solutions
      • Staff Augmentation
    • Technologies
    • How we work
    • About us
    • Success stories
    • Blog
  • MID MARKET ERP DEVELOPMENT

    • Intacct
    • Sage CRM
    • Sage
    • Sage Component Catalog
    • How We Work
    • About Us
    • Success Stories
    • Blog

Blog

CodePartners Blog

rss


Designing Error Messages

SHARE THIS
Facebook twitter linkedin Print Print
Print Email

by Derek Du

Displaying error message is one of the most basic functions of an application, but it also can be overlooked easily because we often focus on the core functions of the application. There are many ways to present error messages, but in my opinion there are basically three objectives we want to achieve with error message and as long as the design can fulfill those, it is a decent one.

Objectives of error message

 

Error message should make it easier for the users to:

  1.  Know there is an error
  2.  Know what is having error
  3.  Know how to correct the error

 

In past projects, form page and listing page are the two most common pages that display error messages. 

Error message on form page

 

On a form page, I use these three ways to represent error messages:

Error message on top or bottom

 

Good for a simple form. For example, login page.

 

Error message next to a field

 

 

This helps users find the fields that need to be corrected, but if the correction instruction is long, the page’s layout will suffer.

Error messages all displayed in a single block on top

 

 

Useful when instruction for correction is so long that putting it within the form will break the layout. Combined with highlighting the problematic fields can help users find the fields quickly and view all instructions in one place.

I feel these three ways are sufficient to cover all scenarios. I can just pick one of them based on the actual situation.

Error message on listing page

 

Listing page is a page that contains a list of records. This page type is different than a form page because the page is often long, and each record often has its own action buttons, e.g. edit, delete, which could trigger error message. Because of this, there is one more thing that needs to be accounted for – whether we need to maintain the current view of the user.

allows user stay or return to where she was

 

Consider a page with a very long list of records. When operating on one of the records, an error occurs and the page scrolls to the top or bottom where an error message is displayed. After reading the error, the user will have difficulty finding where the original record is.

It is a good practice to always consider whether to maintain the user’s current view, for it is very likely the user will continue to work on the record or the records next to it after seeing the error. In order to maintain the view of the page, I use an in-page pop-up window to display the error.

There are other ways. For example, you can add a link in the error message to allow the user to go back to the problematic record.

There are downsides, however, the pop-up dialog requires the user to click the close button to continue, and the "link" approach scrolls the page back and forth. But, they are decent designs as they fulfill all three objectives of error message.

Listing pages do not always require one to maintain the view. For example, many listing pages offer action buttons, such as a Batch Deletion button. Users can select multiple records and delete them at once. In that case, displaying the error message next to the action button is more common.

These are my thoughts on the error message’s objectives, which can be a starting point to develop a good error message design. Also, I shared a few designs from my past projects. Hopefully these can inspire and help people on their own projects.

 

Tihs blog post originally appeared in Derek's blog, Stuff.

 




Comments are closed.
On February 19, 2015 in Development, Web Development [Post:by]
Tagged With: user experience, Best practices, UI design / 2127 Views

Search

Categories

  • General (166) rss
  • Development (158) rss
  • Success Stories (40) rss
  • Products (29) rss
  • Uncategorized (18) rss
  • BTerrell Group (5) rss
  • Project Management (22) rss
  • Web Development (57) rss
  • Web application (33) rss
  • Integration (19) rss
  • Mobile Development (7) rss

Archives

  • 2015
    • January (5)
    • February (7)
    • March (6)
    • April (5)
    • May (2)
  • 2014
    • January (13)
    • February (12)
    • March (13)
    • April (12)
    • May (11)
    • June (12)
    • July (11)
    • August (13)
    • September (10)
    • October (8)
    • November (6)
    • December (4)
  • 2013
    • April (73)
    • May (22)
    • June (20)
    • July (20)
    • August (22)
    • September (19)
    • October (13)
    • November (12)
    • December (7)

Tags

.NET Accpac app development application customization application development automation Azure C# cloud components Crystal Reports customization development ERP general ledger HTML5 Intacct Intacct Platform Services integration JQuery load balancer mass update mobile development OCR Order Entry outsourcing PO pricing product development project management REST Sage 300 ERP Sage CRM software integration trigger user interface Visual Studio web application web development website development Workforce Go! .NET ACA accpac Ajax Amazon AP invoices application development Arxis ASP.NET automation Axure BTerrell Group C# Cloud computing CodePartners Constant Contact credit card processing CRM crystal reports custom software Customer Service Customization Delete team project design phase Development doc-link DRILLDWNLK ERP event Excel GLAFS Intacct Intacct Advantage Intacct Platform Services Integration Java script JavaScript jQuery Kerr Consulting LinkedIn Microsoft MSSQL Offshoring outsourcing payroll PCI compliance PCI-DSS Pivot PJC project management sage Sage 300 Sage 300 ERP Sage Accpac ERP Sage CRM Smart Rule social media software testing SQL SQL Query SQL Server staff augmentation sub-ledger success success story TFS Trouble shooting UI design Visual Studio WCF Web API web application web design web development Webinar website Windows Windows Azure XML
Email this article from Codepartners.com
Separate multiple addresses with commas(,)
To: *   Copy me
Subject:
From: *
Message:
ABOUT US / CONTACT US / NEWS & EVENTS
CodePartners / 16200 Addison Rd. STE 270 / Addison, Texas 75001 / Phone: 214-647-2611 / Toll Free: 866-647-2611 / Fax: 214-647-2612 / info@codepartners.com
© 2006 - 2015 codepartners.com All Rights Reserved.