Skip Ribbon Commands
Skip to main content

SharePoint Strategist Blog


SharePoint Strategist > SharePoint Strategist Blog > Posts > Notes on Designing a Good User Interface
July 10
Notes on Designing a Good User Interface

Often when we are designing solutions we are thinking strictly about data validation, back end sources, storage requirements, hardware configurations and the policies that support these elements.  The User Interface (UI) is sometimes the last thing we are discussing, but for end-users it is a very important part of how they react to our solutions.    

In every project I do I try to adhere to some simple guidelines to make my user interface more appealing to those who will ultimately judge the success of my project - the people who will use it.  While the list below is not comprehensive in the scope of a project if I can keep these issues in mind as I design the site I'm doing good! Here are a few of those guidelines:

  1. Wire Frame It: Take the time to draw up a layout of your page design and review it with your graphic designers or user group. Be flexible and allow yourself three revisions. Do this up front or if your company has a style guide for graphic design leverage that asset in your site design so you do not have to reinvent the wheel. Do not worry that you have to be a graphic designer to do this. Boxes on a page, labeled as to data element or function is good enough.
  2. Use Your Company's Style Guide as a Starting Point: Many companies who have graphic design departments or outsourced services have a style guide for how their materials, both printed and on-line, should be formatted. Find out if your company has this documentation and utilize it to give yourself a starting point for your design. This can save you tremendous time when selecting color schemes, font faces and other interface elements. Additionally, you may be able to repurpose print or web graphics that were originally created for other materials. These readily available assets can give your solution an immediate step up and a more professional, integrated look & feel.
  3. Maximize Screen Real Estate:  The designated use of screen real estate depends on the type of solution you are designing.  If you are designing a retail destination landing page you are going to devote more real estate to static and motion graphics.  If you are designing a records center or list/library driven site your real estate should prominently deliver the most recent or relevant information. The point is - don't waste it.  Every pixel on a users screen has the opportunity to inform or direct your user to their goal.  Let your sites primary purpose be a guiding light for your design decisions.
  4. Use Color as a Visual Guidepost:  Use color wisely.  While I am always in favor of branding your sites & solutions it is equally important to be consistent with your color scheme when providing direction to the user.  Consistent colors for navigation, visual instructions, help buttons or data segmentation can immediately tell the users what they should do next.  If your company does not have a formal style guide as suggested above you can use an online color guide to help you select the scheme. My favorite is which a colleague of mine introduced me to.
  5. Consistent Element Placement:  It is important that you teach users where they will normally find certain types of information as they navigation through your various sites or solution sets.  Use the same font face and/or color and page location for your visual instructions.  Do not make your users hunt for navigation, help or action buttons. Utilize sidebars, headers and footers for placement of these types of design elements. Use borders or background colors to guide the users eye to helpful information and necessary action controls.
  6. Minimize the Metadata:  Most users will categorically reject any system that requires them to spend more than 15 seconds filling in metadata.  This statistic relates primarily to document management solutions which require input from the user.  Certain forms based solutions that initiate workflows can allow more leeway because users know they are saving time by not filling out a paper form.  However, in both cases the use of pre-populated drop down fields will greatly speed the accuracy of gathering data and keep you from being hunted down by angry users! The worst thing that can happen to a Solution Architect is that people simply shun your baby and keep using the paper form!
  7. Click Count – Be aware of how many clicks it takes to execute a specific task or find designated information.  Some firms will adopt o policy of "Three Clicks" meaning that a user should be able to navigate to their destination and/or find their information in 3 separate clicks.  While this may not be possible in all cases you should avoid putting your users through multiple hoops before they feel that they have accomplished something worthwhile in your solution.
  8. Progressively Enhance the Design: At first you may need to keep things simple. You may need to launch the solution before you can brand it. You may need to add additional elements at a later time. This is the normal pattern of iterative development. Decide what elements are critical for your first version and build on that foundation. Leave a little room for additions at a later time. Over crowded pages confuse users. Less is definitely more in a good user interface. Make sure each item on the page has a purpose.   

Remember have fun, be enthusiastic about the solutions you are designing and give your users an opportunity to provide you with ongoing feedback!


There are no comments for this post.