For those doing Web apps - UI design question

For those doing Web apps - UI design question

Old forum URL: forums.lhotka.net/forums/t/1553.aspx


skagen00 posted on Friday, October 20, 2006

What have you found to be the best Web alternative to the typical tabular approach to what I'd call a maintenance window?

For instance, for profiles you might have names, relationships, roles, contact methods (addresses, etc), various transaction history tabs, etc.

I have seen the collapsable bar approach - much like Infragistics WebPanels and Atlas Collapsable Panels will get one. However I find that one can end up with lots of screen scrolling and that if it's a view for users to have multiple ones open immediate, that pages can get too heavy.

I have looked at the Infragistics UltraWebTab, and I find that to be pretty slick - it is Ajax enabled to only pull down what is necessary on the first tab and as one switches from tab to tab, it posts back data from the tab you're leaving (from which I update my BO) and brings down the contents for the tab selected. It's very performant!

However the argument about only seeing "X" information on the screen at one time is certainly there. I've considered having a front tab being more of an "Overview" tab, consisting of read-only web parts that might represent read-only snapshots of information through the tabs along with possible Mashup web parts where there is google results on a profile, perhaps a map of their location, etc. 

For the read-only snapshots of info that represent the other tabs, there would be provided an "edit" link which would direct the user to the appropriate tab to edit the information. (One could click on the appropriate tab as well of course).

This way I could provide a nice customizable view of profiles along with the performant gain I get from using this UltraWebTab control. It feels very usable to me.

How are the rest of you handling this sort of problem in your Web user interfaces? I'm very curious!    

Kahn replied on Monday, October 23, 2006

I would like to know as well what people think about this. I imagine this isnt the forum to post these kinds of questions...however, someone here knows of communities are centered around these kinds of subject matter (Web UI deesign) even winforms UI design.


If anyone have any links please share. Thanks in advance.

david.wendelken replied on Wednesday, October 25, 2006

If you don't want to (or can't) use 3rd party controls (some of the Infragistics controls have been really big in the past), take a look at the MultiView or the Wizard controls.

You can also just use <div runat="server" id="whatever"> and roll your own effect. :)

Best of luck, I'm in there trying to figure out how I want to do things too!

Bayu replied on Wednesday, October 25, 2006

There are some MSDN forums that I visit from time to time. They are nowhere near to this forum in terms of activity, but over time they have accumulated to a valuable searchable archive.

WinForms related:
- http://forums.microsoft.com/MSDN/default.aspx?ForumGroupID=2&SiteID=1

WebForms related:
- http://forums.asp.net/

For a list of all MSDN forums:
- http://forums.microsoft.com/MSDN/default.aspx?SiteID=1

Bayu

SonOfPirate replied on Thursday, October 26, 2006

What you are asking is really a question that should be posed to your users as part of your requirements analysis for the project.  That being said, I have found that we, unfortunately, live in a Microsoft world and, as such, people are used to the types of interfaces found in the MS products - especially Office.  So, the type of UI you are describing with the Infragistics tools (which I use predominantly, btw) does allow you to develop the multi-tab property pages like those found in Outlook for managing things like contacts, etc.

However, it is really important that you look at this from a good UI design perspective.  Prior to AJAX, it was really difficult to truly emulate the kind of interface you find in MS-Office.  Now, we are closer.  But, is it still the best way to present the info through a web app?

The downside of the UltraWebTab as you have described it is the latency when switching tabs.  Fortunately, you can improve this by preloading all pages but now you have to deal with an increased load time initially.  These are, of course, issues inherent to web apps no matter what form you present the information.  And you have to weigh the trade-off of each.  In addition, in order to make use of the lazy-load feature, you have to split up your BO into multiple controls or pages that are loaded into each tab.  This makes data-binding and bridging the layers a bit more work since each tab really is presenting a subset of the properties contained in a single BO.  I have accomplished this in the past, but it does complicate things.

The keys to success really are to get feedback from your users how they think the information should be presented, make sure that you are consistent so that whatever form you use for one object is used for them all and to make sure that the information they need most is the most readily available.  Users will quickly tire of a UI if they have to make extra clicks and wait to get what they need no matter how "pretty" it is.

I personally like the tabbed approach versus the link and whole page refresh method just because I find the latter annoying.  And, with the majority of users familiar and comfortable with the Office UI, you probably can't go wrong emulating that look-&-feel.  Thankfully, AJAX gives us more leverage to accomplish this and Infragistics has a long history of delivering stable, quality products.  Not trying to push you in a direction by any means, but there's no point reinventing the wheel, eh?

Hope that helps.

 

skagen00 replied on Thursday, October 26, 2006

Thanks for your thought out responses.

We are actually developing an app (replacement for existing application) for many prospective and existing customers and not for a specific customer, so the actual choice of the UI is really in many respects in our lap - determining a UI that we feel is most effective and flashy for sales. Certainly customer input could probably take some form in this process, but in the end a lot of the decision will fall upon us. As I've found there is a balance there that needs to be maintained between page size/performance/usability/aesthetics/etc.

For the UltraWebTab, there is certainly a level of latency - I hear you. However, I initially used the WebPanels and there is not any inherent Ajax to them - the initial load time for a page of what would be many "tabs" is pretty painful. The nicety of load-on-demand is obviously that a user only takes a hit when the information is needed. The majority of our users will be within a LAN, and I suspect the delay will not be too bad. 

I have found the databinding on UltraWebTab to really not be too bad - upon each tab change, the contents of the tab being left are passed and the stateful BO (either in a cache or what have you) is updated from that information.

With respect to making sure the information they need most is most readily available, that's where I think a web parts front screen can be really useful - essentially a dashboard of read-only page parts (read-only for performance sake) and mechanisms to drill to information that needs to be changed (drilling through might switch over to a UltraWebTab to the appropriate information). 

I really like the page parts mechanism as a dashboard for records that may have a lot of information behind them (both descriptive and transactional information). Obviously the ability of a user to decide which page parts to show and in which arrangement can allow nice tailored view to suit a user's most frequent needs of viewing the information.

To give an idea, a profile (Ind or Org) might have: Alternative names, Contact methods (addresses, phones, etc), Relationships, associated documents, transactional history (in at least 4-5 areas in our system) among many other things. So a UI approach that loads everything up front in an editable fashion is just too expensive - too heavy.

And thank you Bayu for the forum link - I'll take a look.

 

 

 

Copyright (c) Marimer LLC