UI design help and suggestion

Hi to all developers,

I am a new user on the forums so I hope this is the right place to ask a specific UI design question. I was trying to search for specific UI development forums or community but was unable to find any. Please don't be mad if this is not the right place to ask these sort of question.

We're small SW development company that specialize in data acquisition and analysis SW. Our flagship SW is called DEWESoft and is currently in version 7. This is very successful SW package that is used in variety of industries including automotive, aerospace, transportation, civil engineering and other places.

The main problem is we're small company and most of our stuff comes with engineering background (physics, math, electronics, algorithms) and we more or less not that good with UI design. We managed to revamp the SW GUI in version 7 from the ground up. We mostly succeeded very well and our customers are very happy with it. Except with one thing - which is very important part of our SW. I will try to explain clearly:

In the image below you can see the UI of our SW. Our SW has 2 main sections or modes if you like it:

- Measure mode: this is the mode where users set's up all the things for data acquisition. This mode is used to acquire data from various sources and store it to the disk. This mode is accessible in top left "Measure" button
- Analyze mode: this mode is used to do all various calculations, processing and analysis on the already acquired data. This is the button in top left with "Analysis" label.

http://dl.dropbox.com/u/1207859/dewesoft7.jpg

We get various of feedback from our users who complain they do not know in which mode they re currently. And this is a very big deal, since we even know some users won't use new version of SW because of that. So we want to improve that really badly!

We spent number of hours discussing of those two buttons to switch modes. How they should look like, where to put them. And they look currently as you can see them on the image below. And according to the user feedback we got it wrong.

Now I would like to get some feedback and suggestions from you guys. How should we approach this UI problem? Do you have any ideas how should we design the UI to make these two modes easy accessible and visually clear to users in which mode they operate. Any kind of info, suggestion, feedback, idea from you guys would be more then appreciated for our brainstorming sessions.

Thanks a lot,
Jume

How many modes do you expect to have?

On/Off sounds like a winner

looking at your website, it seems you voluntarily designed the two modes to be very similar, giving to the off-line "analysis mode" the same on-line look and feel of the "measure mode". This seems a good thing because it gives to the analysis phase an "immersive" character, but it has the side effect of confusing users on which modes they are currently in. Therefore, it seems a by-design defect :).

anyway, adding to the previous suggestion of making clear the on/off - online/offline nature of the two modes, have you considered changing the tone of the overall UI based on the selected mode ? for example, an "alerting" light red tone for the measure mode and a "relaxing" light blue tone for the analysis mode ...

Quote:

---

Originally Posted by Arjay

How many modes do you expect to have?

---

Only two modes as stated in my original post: Acquisition mode, Analysis mode.

Quote:

---

Originally Posted by superbonzo

anyway, adding to the previous suggestion of making clear the on/off - online/offline nature of the two modes, have you considered changing the tone of the overall UI based on the selected mode ? for example, an "alerting" light red tone for the measure mode and a "relaxing" light blue tone for the analysis mode ...

---

so if I understand your advice correctly, I should replace the existing two mode buttons with one ON/OFF button? We never thought doing it this way but definetely worth trying!

We had the idea of changing overall tone of the GUI based on the selected mode, but it only stayed in the idea phase. Maybe it's time to rethink this again.

Thanks for the input guys. I really appriciate it. More ideas are welcome!

Jume

Quote:

---

Originally Posted by Jume79

so if I understand your advice correctly, I should replace the existing two mode buttons with one ON/OFF button?

---

yes, although some visual feedback seems necessary in any case ( like the UI tone change ... ).

personally, I'm not a great fan of "mode based" UIs; there are many professional softwares that operate with different "modes", so, this means that this design has its own merit; but I've always found them confusing because sooner or later you (the user) find yourself in a situation where you want to do something that you cannot do in the mode you are currently in; then you are forced to actively think on how you can accomplish your task without changing mode, or on whether switching mode is necessary; this can easily get distracting and, therefore, annoying.

an alternative design might be a tabbed document interface where each tab/document can be of one of two types: online/active/acquire tabs and offline/analysis tabs; of course, each tab type should have a specific visual theme ( like, say, light red tone for the former, light blue for the latter ... ).
In this way, when the user has finished acquiring data, instead of "switching to the analysis mode", he simply "create" an analysis document that goes side by side with the original "acquisition" document.

Quote:

---

Originally Posted by superbonzo

personally, I'm not a great fan of "mode based" UIs; there are many professional softwares that operate with different "modes", so, this means that this design has its own merit; but I've always found them confusing because sooner or later you (the user) find yourself in a situation where you want to do something that you cannot do in the mode you are currently in; then you are forced to actively think on how you can accomplish your task without changing mode, or on whether switching mode is necessary; this can easily get distracting and, therefore, annoying.

an alternative design might be a tabbed document interface where each tab/document can be of one of two types: online/active/acquire tabs and offline/analysis tabs; of course, each tab type should have a specific visual theme ( like, say, light red tone for the former, light blue for the latter ... ).
In this way, when the user has finished acquiring data, instead of "switching to the analysis mode", he simply "create" an analysis document that goes side by side with the original "acquisition" document.

---

I totally agree with you. I was in charge of UI re-write in version 7 and I wanted to go in this direction. But since ever the SW had worked in these two modes and the management didn't want to change this, because users were very used to this concept.

My initial ideas was to completely remove the buttons for switching modes and have the toolbar actions change according to loaded document. If it's a setup file for acquisition, make those toolbar items visible which apply to the acquisition mode. And if it's a stored data file then operate with those "anaysisi" toolbars. This seemed very natural to me, but didn't find enough support in the project management group.

Maybe it's time to think this way all over again?!

The On/Off button is a good idea. Also, you may wish to have a status bar at the bottom of the app that indicates the mode in a pane.

Quote:

---

Originally Posted by Arjay

Also, you may wish to have a status bar at the bottom of the app that indicates the mode in a pane.

---

We refuse to add status bar because the screen-estate is really important aspect of the main window. Maybe some other GUI element instead of status bar or the different color scheme as some guys already suggested above...

Quote:

---

Originally Posted by Jume79

We refuse to add status bar because the screen-estate is really important aspect of the main window. Maybe some other GUI element instead of status bar or the different color scheme as some guys already suggested above...

---

Sure. You can also recover some screen real estate by using dockable windows. The big buttons on the toolbar are nice, but take up quite a bit of verticle space.

Originally I asked about more than two modes (even though you had specified two modes in the original post), I wasn't sure if you were going have only two modes in the future. The on/off toolbar would work well for two modes, but it wouldn't work for more than two. Another option would be to have a toolbar mode droplist.

Quote:

---

Originally Posted by Arjay

Sure. You can also recover some screen real estate by using dockable windows. The big buttons on the toolbar are nice, but take up quite a bit of verticle space.

---

True but those big buttons have its purpose. Often our SW is used on rugged industrial PCs and measurement instruments with touch screen. Therefor big buttons are a must!

Quote:

---

Originally Posted by Arjay

Another option would be to have a toolbar mode droplist.

---

This I don't understand? Can you explain a little bit more?

Quote:

---

Originally Posted by Jume79

True but those big buttons have its purpose. Often our SW is used on rugged industrial PCs and measurement instruments with touch screen. Therefor big buttons are a must!

This I don't understand? Can you explain a little bit more?

---

You know your application better than I. If you need big buttons, consider putting them in a window that 'flys' out (or down). In their normal state, they're hidden (similar to auto-hiding the taskbar in Windows). When hidden you get the additional real estate and when visible you get the BIG buttons.

The drop list is simply a combobox in the toolbar. I'm referring to a non-editable combobox, but an example of an editable combobox is the url combo in the IE or FireFox browser.

I like the RIBBON, and most users are used to it. You can move everything to the menu, and leave the bottom of the screen the way it is.

Quote:

---

Originally Posted by Arjay

If you need big buttons, consider putting them in a window that 'flys' out (or down). In their normal state, they're hidden (similar to auto-hiding the taskbar in Windows). When hidden you get the additional real estate and when visible you get the BIG buttons.

---

And if you choose tho go in this direction, then you also must provide a different kind of visual feedback telling the user which mode is currently active. Personally, I like the idea of changing the overall tone of the UI, because it seems to obviously carry the message, but is still not distracting.

Anyway, one would think that the buttons were pretty obvious too, but I guess that it depends on the profile of people using the interface.

You could also add the info on the active mode to the title bar. Together with color-based cue, I think it would work (except on small screens, but in that case, if the user is unsure about what is the current mode, the flyout buttons can tell him/her).

The best thing to do is to test - ask some of your users to come and try the software, and ask them for on-the-spot feedback. Ask them to elaborate on what they liked and why, and of course, what they didn't like, and why. Try to understand the way they are thinking when using your soft. This way, you'll gain some insight, and probably have some new ideas that will work best for your target users.

That looks like a cool application! For my part, I have a couple of suggestions. Firstly, I don't think that "Measure" is a good name for the button that you have there. Think about exactly what functionality the program performs when it is in this mode. If it is data acquisition, then "Acquire Data" might be a better name.

It seems from the image that your program is recording some real-time data, including video and the monitoring of certain signals. Then, when you go into "Analyze" mode, the recording stops and you work on the data you have just gathered. Given this functionality, maybe you want to make the buttons look more similar to a DVD player: a "record" button (typically a red circle) for acquiring the data, a "stop" button (typically a black square) for halting the acquisition, a "play" button (a forward-pointing triangle) for playing it back, and then a magnifying glass or something for performing whatever analysis you are doing.

As an aside, the top portion of the interface reminds me of the Ribbon in MS Word. This is a good concept too, because when you are in a specific mode, only the buttons that are relevant to that mode will appear.

The person whose posted this phrase, I'm so thankful of him for this because it's so useful for me."I've always found them confusing because sooner or later you (the user) find yourself in a situation where you want to do something that you cannot do in the mode you are currently in; then you are forced to actively think on how you can accomplish your task without changing mode".