Back to Art & Logic Resources

Nine Principles for Web-based Management Projects

by James Dueck

It seems like almost every networked device today has a web-based management interface. Configuration and monitoring via a web browser has become a must-have bullet item on many product brochures. Still, creating an effective and attractive interface remains a challenge for hardware companies who may not be well-versed in web client technologies. These nine simple principles will help you do it right the first time.

1. Know your users. Design for your target user's knowledge base and tasks. Are they hardware engineers, network administrators, consumers? Each has different needs and perspective.
   
   
2. Do iterative prototyping. Your users will judge your product on how usable and attractive the GUI is. Allow 15% of total development time for iterative prototyping. Play with different types of navigation, parameter grouping, and control placement. Use simple tools like PowerPoint or HTML to mock-up every page. Create a few significantly different GUI's to present to potential users for feedback.
   
   
3. Conduct usability studies. As a GUI becomes more feature-rich, usability studies ensure a solid product via real-world feedback. Ideally these are done more than once during development.
   
   
4. Hand-code HTML and JavaScript. HTML layout applications such as FrontPage are fine for developing personal pages, but for a web DMS project they can spell disaster. These editors make the interface less visually consistent, harder to debug, and slower. Hand-code - you'll save time and money.
   
   
5. Determine browser requirements early. Horror stories about cross-browser incompatibilities are doubly true for web DMS projects, especially when advanced GUI features are added. When more browser platforms and versions are supported, it takes longer to work out all the kinks in your pages. Which browsers do you really need to support? Netscape? Internet Explorer? Opera? What versions? What platforms?
   
   
6. Conserve memory. Web development for low-memory systems creates unique challenges. Manufacturers often have 500KB or less available for the system, only a small portion of which is available to the GUI (HTML pages, JavaScript libraries, images, etc.). Keeping memory footprint low also increases performance, often dramatically.
   
   
7. Use Macromedia Flash(tm) or JavaScript instead of Java applets. Many believe Java applets are the only road to dynamic displays for alarms, alerts, and performance monitoring. This is not true. Flash(tm) is an ideal technology for displaying rich UI controls (such as charts, graphs, chassis displays, sliders, etc.) for embedded devices. Flash(tm) movies are vector-based, making them smaller and faster than implementations using other plugins. Additionally, JavaScript is a fast, powerful technology that can enhance your interface. Avoid using crash-prone, bulky Java applets on your embedded device - Flash(tm) and/or JavaScript is better.
   
   
8. Separate the GUI from the server code. There should be a clean separation between GUI code and server code so you can divide the work between teams or do the work at different times. You want to be able to make modifications to the way the server code is implemented without requiring changes in the user interface, and vice versa.
   
   
9. Consider outsourcing. Successful projects often use in-house expertise to develop the server code (which talks to the device), while reducing the GUI development risk by hiring a company that specializes in device management interfaces.

Back to Art & Logic Resources