keithstric.com::UI Design

Following LotusPhere 2008 virtuallyHomeExcelData class update and BlogSphere v3.0.1 B8a bug

I've started a new application at work. I've been trying to come up with a UI for the application but everything I come up with is boring and is starting to look like my other applications. I've been trying to get some inspiration from Chris Blatnick 's site and Nathan Freeman 's site to no avail. Though I will be using many of the techniques that they have discussed no matter how the application looks. I've also been looking at some other web sites trying to come up with some ideas. Maybe I've hit an imagination slump (like I had that much imagination to begin with )? Maybe it was the lack of attending Lotusphere this year, which is usually a great source of inspiration?

I want something new and fresh, as this application is going to be very large by my standards (probably very small by some) and will have a lot of visibility within the organization and will put a positive (I hope) light on Lotus Notes. I've been very vocal at this place of employment preaching about the capabilities, rapid deployment and that Lotus Notes applications don't have to be simple, but can be robust, complex applications using a variety of technologies, capable of whatever is asked of it (Lotus Notes Evangelist). While we don't have the most recent version (we're just starting to move to R7), I still try to put modern ideas and designs into production, no matter how simple of a task is required.

I've come up with a basic navigation structure using a horizontal menu (thanks Chris) that I think will work for me and also it will require a couple of places with an embedded frameset (thanks Nathan). While these are, at the moment, merly ideas on certain pieces of the application I still haven't come up with a color palette or what I want the application to look like. Now I'm sure some of you think the logic should come first and then the UI, but I've always started with the UI and then incorporated the logic to minimize my time in changing the logic to accomodate the UI, and that seems to work for me.

So, I guess I'm requesting your help on providing some inspiration. Maybe a site that has been a good source of ideas for you or a UI you particularly like, or whatever. I just need to get out of this slump so that I can stop wasting my time redesigning this same initial form over and over.

Comments Disabled

Comments (6):

Thomas Bahn

Re: UI Design
On: January 27, 2008 06:26 PM

"(Notes) Form follows function" Emoticon

I think, it's vital for a good UI to lighten the job its users has to do. Thus without giving us details, what is this application about, it's really hard to come up with something appropriate.

When you know Chris Blatnik's (demo) databases, you see, that the ones with a exceptionally good UI have also have their UI adapted to the particular application.

For example, the horizontal menu may not be the best option for an application used to drill down information using lots of views (which is sometimes the most appropriate approach).

Thomas

Keith Strickland

Re: UI Design
On: January 27, 2008 08:02 PM

Thomas,

Thank you for the reply, but you're absolutely correct. This application will be very much view oriented. There will be a lot of data displayed in the views which is why I was thinking of using the horizontal menus.

It will be a position (job position) tracking system. It will keep track of job positions and their status (i.e vacant, filled, etc.). If the position is filled then it lists who it is filled by, when they are scheduled to retire and what the requirements for the position are.

It will have a lot of notification emails that will be sent out when certain criteria are met and be a means for people to track positions and employees.

After putting the initial requirements together I started coming to the realization that this application was going to be pretty large but with a small user base seeing as how it will be tracking HR data.

Keith

Martin Vereecken

4	Re: UI Design On: January 30, 2008 03:45 PM
Keith, It would also help if you try to make some sketches/an initial mockup, very basic, to give us an idea. Could even be a pencil drawing.

Martin Vereecken

3	Re: UI Design On: January 30, 2008 03:45 PM
Keith,<br />It would also help if you try to make some sketches/an initial mockup, very basic, to give us an idea. Could even be a pencil drawing.

Keith Strickland

Re: UI Design
On: January 30, 2008 05:28 PM

Thanks for the reply. I've since picked out my colors and a basic (read just the header) form layout.

The problem I'm having now is that the Employee form has a whole lot of data. Data like, of course first, middle, last names, address, etc. Plus College degree, Majored in, institution, graduation date, hire date, retire date, last promotion date and information about the position. I'm trying to group this information so it's just not a bunch of rows scrolling down the page.

I'll try and get a drawing or something up on the screen, it'll probably end up being a screenshot of the latest iteration Emoticon

Charles Robinson

Re: UI Design
On: February 11, 2008 01:41 PM

I'm going through something very similar right now. I'm combining several apps that used to be departmental but through the years they became an interconnected solution. The old three-pane layout was just overwhelming for users since it presented a total of nearly 40 views. I'm using a combination of filtering techniques to drill down to what the user wants, and by using SetViewInfo I've been able to reduce it down to about a dozen views.

First, I had the business stakeholders categorize the views from the old applications. I created a profile document for each category and list the views that are in it. (Views can span multiple categories.) Then I built roles to mimic the categories and assigned those to groups of users. This way I can show a combobox of views this user is interested in based on role membership.

I display everything in three frames. The top frame is a header with the the first level of filtering where the user selects the role (if they have a specifically assigned role this is pre-selected for them); the second frame is a series of faux tabs that contain the views for the selected role, inspired by Chris' horizontal menu; then the bottom frame displays the view, which gets filtered with SetViewInfo.

To make it even more friendly I'm using roles to direct the user to what needs to be acted on. For example if you're in the [Accounting] role and the next step in the workflow is AccountingApproval, I use anchor links to take you directly to the Accounting section and expand it. If you edit the record and you're not in any of the workflow roles, those sections stay collapsed.

I plan to post more about this as I progress with the implementation. I still have a three-pane interface, technically, but it's twisted around and more accessible to the users. Most users can't believe it's a Notes app. Emoticon

Full Archive

All Downloads

The opinions and ideas posted on keithstric.com are not necessarily the opinions and ideas of my employer. The solutions, techniques and code provided here are not guaranteed or warranted in any way and are free for you to use at your own risk.

keithstric.com is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at www.keithstric.com.

All code samples and downloads are copyright Keith Strickland and licensed under Apache License 2.0