UI design help and suggestion
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: UI design help and suggestion

  1. #1
    Join Date
    Sep 2010
    Posts
    6

    Question 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.



    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

  2. #2
    Arjay's Avatar
    Arjay is offline Moderator / MS MVP Power Poster
    Join Date
    Aug 2004
    Posts
    11,309

    Re: UI design help and suggestion

    How many modes do you expect to have?

  3. #3
    Join Date
    Jan 2006
    Location
    Chicago, IL
    Posts
    14,982

    Re: UI design help and suggestion

    On/Off sounds like a winner
    David

    CodeGuru Article: Bound Controls are Evil-VB6
    2013 Samples: MS CODE Samples

    CodeGuru Reviewer
    2006 Dell CSP
    2006, 2007 & 2008 MVP Visual Basic
    If your question has been answered satisfactorily, and it has been helpful, then, please, Rate this Post!

  4. #4
    Join Date
    Oct 2008
    Posts
    1,137

    Re: UI design help and suggestion

    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 ...

  5. #5
    Join Date
    Sep 2010
    Posts
    6

    Re: UI design help and suggestion

    Quote Originally Posted by Arjay View Post
    How many modes do you expect to have?
    Only two modes as stated in my original post: Acquisition mode, Analysis mode.

  6. #6
    Join Date
    Sep 2010
    Posts
    6

    Re: UI design help and suggestion

    Quote Originally Posted by superbonzo View Post
    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

  7. #7
    Join Date
    Oct 2008
    Posts
    1,137

    Re: UI design help and suggestion

    Quote Originally Posted by Jume79 View Post
    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.

  8. #8
    Join Date
    Sep 2010
    Posts
    6

    Re: UI design help and suggestion

    Quote Originally Posted by superbonzo View Post
    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?!

  9. #9
    Arjay's Avatar
    Arjay is offline Moderator / MS MVP Power Poster
    Join Date
    Aug 2004
    Posts
    11,309

    Re: UI design help and suggestion

    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.

  10. #10
    Join Date
    Sep 2010
    Posts
    6

    Re: UI design help and suggestion

    Quote Originally Posted by Arjay View Post
    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...

  11. #11
    Arjay's Avatar
    Arjay is offline Moderator / MS MVP Power Poster
    Join Date
    Aug 2004
    Posts
    11,309

    Re: UI design help and suggestion

    Quote Originally Posted by Jume79 View Post
    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.

  12. #12
    Join Date
    Sep 2010
    Posts
    6

    Re: UI design help and suggestion

    Quote Originally Posted by Arjay View Post
    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 View Post
    Another option would be to have a toolbar mode droplist.
    This I don't understand? Can you explain a little bit more?

  13. #13
    Arjay's Avatar
    Arjay is offline Moderator / MS MVP Power Poster
    Join Date
    Aug 2004
    Posts
    11,309

    Re: UI design help and suggestion

    Quote Originally Posted by Jume79 View Post
    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.

  14. #14
    Join Date
    Jan 2006
    Location
    Chicago, IL
    Posts
    14,982

    Re: UI design help and suggestion

    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.
    David

    CodeGuru Article: Bound Controls are Evil-VB6
    2013 Samples: MS CODE Samples

    CodeGuru Reviewer
    2006 Dell CSP
    2006, 2007 & 2008 MVP Visual Basic
    If your question has been answered satisfactorily, and it has been helpful, then, please, Rate this Post!

  15. #15
    Join Date
    Jan 2010
    Posts
    1,099

    Re: UI design help and suggestion

    Quote Originally Posted by Arjay View Post
    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.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center