Red Image Border + Red Tabs -- UNL template additions

[Delfeld]

UNL Template additions samples (these designs are not intended to replace the current UNL Template functionality).

Red Tabs

Red tabs, light outline

Red tabs, heavy outline

Red tabs, heavy outline with red shading

Red Image Border

Red border around a black and white picture

Red border around a color picture, and caption with the red border

[Delfeld]

Any comments?

This doesn't seem like a very vital discussion forum . . . at this point, 93 views, and no one has said a thing. There was far more discussion and concerns at the WDN meeting.

[smeranda]

Any comments?

This doesn't seem like a very vital discussion forum . . . at this point, 93 views, and no one has said a thing. There was far more discussion and concerns at the WDN meeting.

Neil:

I'd suggest changing this topic to a poll (or creating one if it can't be converted). Quantitative data is more helpful in determining results.

While on the topic, towards the end of the August WDN meeting, I thought I remembered the conversation moving towards red being used solely to indicate the selected tap?

[mmesarch1]

I like the heavy line and the red transition for the tabs and like the red outline in the picture.

[rcrisler1]

I think the main thing here is that we need to make sure that these changes communicate something of benefit to our users; that the addition of red isn't just an aesthetic option in the tabs, but that it communicates something about the state of the selected tab. Seth was working on a refinement of the concept but didn't get it posted here in time for Tuesday's meeting.

Red borders ... honestly I don't know what that adds, as the photo it borders should really be the center of attention rather than the border. If the WDN chooses to implement that (and I'd suggest that we might make that decision in the November meeting), we'll need to describe it semantically, as we do with the zenboxes, and in doing that we might consider the full range of semantically-described 'moods' those colors are intended to represent.

[Delfeld]

Seth

The design ideas are not really ready for a poll. I wanted to get a lot of feedback first, but that has not really happened.


Mark,

Thanks for the comments!


Bob,

I disagree that these additions to the template do not communicate something of benefit. Of course you remember the explanation I gave at the WDN meeting. The tabs intend to bring the concept of Husker red more into the page; the image border is the same. It is meant to be simple emphasis, while still fitting into the overall look-and-feel of the UNL template.

To answer your specific point, it is important to make sure that the highlighted tab does not seem out of place, so the red has to exist in all the tab areas, active or not, in some manner (maybe just in the horizontal line). My solution is an inspiration -- and not a final answer -- but it is on the right track. Simply having an active tab which is red and no other red turned out weird. My attempts at "red in the active tab only" did not work, so I look forward to Seth's thoughts on the matter.

Since this is not really a very active place for discussing WDN ideas, I would suggest just waiting until the next WDN meeting to present any changes.

There is a problem with multiple colors, which Seth himself has allowed about the zen boxes. I explained this best in the chat room: "People - if given colors - will use colors as a representative for *meaning*, rather than just an overall theme. That's the problem. This red border inherently defines it's meaning - it calls attention to the image. The zen colors DO NOT inherently have a meaning (except for calling attention); thus, there is a problem with zen which would not exist for image borders." That is, multiple colors actually dilute the effectiveness of the message ("emphasizing an area") rather than enhance the message, because there is more than one message.

Further, semantic use of colors is not universal, either in people's understanding, nor in the template. To say that one color is "warm" and another is "cool" is not a universal statement. For the viewer, the actual meaning of the color itself will never be very clearly defined.

Finally, a border is a separation of areas. The context defines whether the separation needs to be subtle or striking. On a very busy page, the light grey border is often inappropriate (e.g., http://www.huskers.com/). On a page that wants to draw attention to pictures, subtlety is ineffective (e.g, http://ucomm.unl.edu/).

Thus, there should be only two colors for the image borders: one for strong emphasis and another for weak emphasis.

I think it is great that I was able to inspire UCOMM to address these WDN issues seriously, and take up work on my design ideas. I look forward to Seth's improvements on the tabs. If anyone has any improvements for the red image border, bring them along as well.

[smeranda]

During the August WDN discussion, it became clear that the tabs needed a bit more to visually separate and should come in-line with a few current UI treatments available in the template that perform similar functionality, most notably the vertical tabbed areas used on the external homepage and a few other places. These use our primary red color to indicate the selected tab.

Therefore, combined with Neal's suggestions, I've taken the current tab implementation and re-wrote the CSS. These tabs are now CSS without images, and degrade fine for dumb browsers (it's just squared-off and shadeless). In addition, the "jumping" effect from the old tabs is gone.

A working mock-up is available at:
http://ucommmeranda.unl.edu/workspace/UNL_WDNTemplates/debug.shtml

Since the above server is my laptop (which is not always connected to the network), here's an image of the new layout:


I'd really like to take the best of all suggestions and move them into a single UI presence. Multiple implementations/themes, despite best recommendations, require more code, support, documentation and payload. All of which contribute to an inconsistent, and at times, confusing user experience.

Let's continue the discussion and refine into one, kick-ass tab UI presence.

[CanadianSuperSpy]

I like the CSS only option!!!!!!

Multiple Instance Support ++

[erasmussen2]

As I expressed at WDN, I like Neal's idea for further development of the tabs that better highlights the current tab and I think Seth's implementation that creates a correlation with the nav where selected tab state is red is a good way to go.

I think there's only need for one set of tabs, both for consistent UI and to avoid having to re implement 1000 things upon template conversion.

[Delfeld]

Looks good, Seth.

I was having some difficulty managing the images anyway, in order to fit into the current image-based tabset.

One of the reasons for not having a full red background in the tabs was to prevent any white text on a white background issue that could come up. I think the CSS-only fix prevents this; however, that is an issue to thoroughly test on all broswers, I think.

Please make a grey-only tabset available for demo as well. The current tabset is fine, and is very useful for non-impact-driven pages. It should also be the default version, since it is currently in place on many websites.

I think this would be better discussed in a WDN meeting, but we need to think about (at least) two audiences when dealing with the changes I suggested. The first is a "recruitment" base; this group probably requires attention-getting pages. The second is a "reading" base; this requires that the interface fade into the background (without becoming not an interface, of course), since we already have their attention, and they want to view content now. The red is great for drawing attention, and the grey is great for general reading. I think both are vital for a properly functioning university-wide template.