"Raising the bar of the community user experience."
- Lithosphere
- »
- Blogs
- »
- Designing Community
- Mark all as New
- Mark all as Read
- Subscribe
- Bookmark
- Subscribe to RSS Feed
- Invite a Friend
You may be aware that our community avatars have not changed since the late nineties...
Their time has come, indeed.
We are revamping the entire offering, to bring their look to more up-to-date sensibilities, while at the same time infusing a bit of underhanded branding that could make them identifiable as "uniquely Lithium".
Their main improvements are:
- 16:9 aspect ratio
- Higher resolution
- Multiple sizes
- Homogeneous style
1. 16:9 aspect ratio
Identical to the High-Definition standard in television, computers and new devices, it evokes the new conventions of panoramic display, and allows more optimal use of our increasingly horizontal experience and its modular components.
2. Higher resolution
Although 36x36 pixels have served their purpose until now, we are finding them limiting when scaling our product and meeting the demands of ever expanding displays. Although we will maintain the same height on our avatar's presence in messages and side panels, we are introducing larger versions for the profile picture and future uses in different platforms. See next point for specific resolutions.
3. Multiple sizes
To better fit the design to each specific purpose, we have identified and implemented five sizes:
"Print" avatar (256x144 pixels)All sizes were adopted from some of the established standards for desktop icons in both Windows and Mac OS (16x16 ; 64x64; 128x128; 256x256) but adjusted on height to maintain the HD ratio.
This extra-large "source" avatar will mostly exist to be able to scale our product in the future, but it may appear in a pop-over in your profile and as the name implies, any printed materials.
"Profile" avatar (128x72 pixels)
You will see this iteration under a user's profile page.
"Message" avatar (64x36 pixels)
This size will be the most common, appearing in message threads and side panel statistics. It closely resembles our legacy avatar, just wider. This has been done on purpose to minimize disruption.
"Favicon" avatar (16x16 pixels)
This mini-icon is just used to decor the URL associated to a user profile... you will see it in the browser's address box and in your bookmarks or RSS feeds on some clients that support it.
"List" avatar (16x9 pixels)
It may appear in some high-density data columns.
4. Homogeneous Style
We want our communities to showcase a highly polished interface, and as part of such strategy, will be offering administrator the possibility to adopt a single theme with multiple collections within. Allowing for both diversity and a unified look and feel.
Each theme (some diversified samples below to show the range of possibilities from high-tech to whimsical) will have its own unique style and visual vocabulary (to better fit our highly diversified clientele's needs), but they will all share a common, overarching DNA of compositional decisions. Namely:
- They are "windows into a larger world", and not "freestanding elements". Therefore they ALL feature cropped imagery.
- They all have the same focal point (different from the vanishing point) on the lower right corner, sharing therefore a similar weight balance and allowing the upper left corner counterbalance with enough space for future ranking, award, and/or score overlapping emblems.
- They will be monochromatic or duotone-like, with clear dominant and recognizable hues to better differentiate similar shapes, while also reducing the ratio of visual noise over signal.
Our plans for deployment will be as follows:
Any new community owner may choose their default theme among a growing and differentiated selection; their users will be able to choose among collections within that theme (at least 8 collections with at least 8 unique avatars each), but not across other themes... Depending on rights, they may upload their own images cropped to the new proportions.
Preexisting communities that choose to upgrade, will offer the new avatars as the only option (That is: older icons will not be available in the Avatar Gallery, with the goal of phasing them out overtime). Any user in those communities with a default icon, will receive a new, default HD Avatar, and any user with a previously selected legacy icon, will receive a slightly modified version of it fitting the new dimensions (hereby dubbed as Classic Avatars). We obviously encourage all users to freshen their look, but we will respect their choice to keep with the old and familiar.
Enjoy the new choices... Coming soon to a community near you.
Hello again, fellow Lithosphereans,
As part of our continuous coverage of User Experience topics around Lithium Communities, we are happy to announce a little bit of incremental improvement that some of you have eagerly awaited for:
Introducing Relative Dates.
Summary: In our quest to make our UI friendlier and your communities' content feel even more relevant to your users, we now allow you to choose “Relative Dates” versus the standard numeric date stamp (starting with Lithium 9.0.3 and refined on upcoming 9.0.4).
What is so great about this feature?
Look at the standard experience of any board. Current dates are so precise that on a column, they need to be parsed one by one. They use numeric values, which do not allow for a webbed narrative or a contextual tie to the user’s concept of NOW.
So with the new feature, instead of this: 03-24-2009 01:26 PM | You have the choice to see this: 16 minutes ago |
Which system does allow you to get a faster gauge of the content's freshness? Which method seems more natural to you or your community's audience? Independently of the answer, you have a choice for either one. I should note that Relative Dates do offer a quick tooltip on rollover displaying the precise date should you need it (so you can get the best of both worlds).
Because we believe that Relative Dates are more human-readable, It would be the default for all new communities, but because we don’t presume to know better than you... It will be off by default on upgrading communities. You can change it ether way.
Enjoy!
<geek info begins>
Now, for those of you that love this short of minutia, lets go on how we implemented it and how you can further customize it:
We adopted a decreasing granularity of relative dates, under the knowledge that the average context awareness becomes less precise over time.
Therefore:
- Today (1st hour): Granular on minutes
- Today (Rest of day): Granular on hours
- Yesterday: Granular on AM/PM
- Rest of the week: Granular on days
- Rest of month: Granular on weeks
- Rest of year: Granular on months
In Settings > Layout Settings > Date and Time Settings you will have a couple of useful choices:
1. You will be able to uncheck “Use Date Names” if you prefer day and month numbers instead of name.
If so chosen, instead of: Saturday | You will get: 2 days ago 3 days ago 2 months ago 4 months ago |
2. You will be able to choose the moment where to stop relative dates using “Relative Date Max Age (Days)”
That way, you may decide to list the first month as relative, and anything older in numeric dates... Your call. Different people recall events and dates on different manner. Use what works best for your community.
Your settings, by the way, are specific to each board, and all associated content to that board (columns, messages, search results, etc) will adopt the standard chosen.
<übber geek info begins>
Since we are in the groove of date customization... Lets remember some of the powerful settings that were already available in your admin.
Independently of your use of Relative Dates, you can customize your date stamp in numerous ways:
In the Admin tool, at “Date Display Format” you can configure the MM-dd-yyyy string to achieve any desired effect (for those techy people in the audience: we adopted the Java SimpleDateFormat Class).
Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 1996; 96 M Month in year Month July; Jul; 07 w Week in year Number 27 W Week in month Number 2 D Day in year Number 189 d Day in month Number 10 F Day of week in month Number 2 E Day in week Text Tuesday; Tue a Am/pm marker Text PM H Hour in day (0-23) Number 0 k Hour in day (1-24) Number 24 K Hour in am/pm (0-11) Number 0 h Hour in am/pm (1-12) Number 12 m Minute in hour Number 30 s Second in minute Number 55 S Millisecond Number 978 z Time zone General time zone Pacific Standard Time; PST; GMT-08:00 Z Time zone RFC 822 time zone -0800
The letters in the string can be repeated to control the abbreviation or extent of the information.
Some samples:
.
Date and Time Pattern Result "yyyy.MM.dd G 'at' HH:mm:ss z" 2001.07.04 AD at 12:08:56 PDT "EEE, MMM d, ''yy" Wed, Jul 4, '01 "h:mm a" 12:08 PM "hh 'o''clock' a, zzzz" 12 o'clock PM, Pacific Daylight Time "K:mm a, z" 0:08 PM, PDT "yyyyy.MMMMM.dd GGG hh:mm aaa" 02001.July.04 AD 12:08 PM "EEE, d MMM yyyy HH:mm:ss Z" Wed, 4 Jul 2001 12:08:56 -0700 "yyMMddHHmmssZ" 010704120856-070
You can see how this could be quite helful in order to localize your dates (to European format for example). For further information on that topic, visit the source documentation at Java support pages.
I am the VP of User Experience at Lithium Technologies, and I have the privilege of announcing the upcoming redesign of Lithosphere.
What is new? Glad you asked. Simply: Our objectives have been recalibrated and the redesign will showcase them:
- Demonstrate our customization capabilities
- Improve the experience of our site
- Insure that our community feels dynamic
- Rebranding of our company and its services
- Encourage more of your participation!
Lets go step by step on how we are going to accomplish this. Please come along:
1. Demonstrate our customization capabilities
As you may know, the biggest achievement from Lithium version 8.x to 9.0 has been the adoption of modern standards in the presentation layer of our communities. That is: Our front-end now features no tables and legacy markup, and instead, lots of semantic content and CSS-driven layout. In layman terms: Our content is completely detached and independent from our presentation... we are not shackled anymore by the platform and can now make anything with the later. And we intend to wow you indeed. Everything will be rethought: From a home page that provides more content hierarchy, form a global navigation that highlights what truly matters and hides what is not needed, to Blogs that feel like a platform for expression (not just a regurgitated forum), to Ideas and Forums that feel more clean and legible than ever before.
2. Improve the experience of our site
You will see that Forums, Ideas, Forums, Home page, all feel differentiated and customized to their purpose.
You will see that those links you rarely used are now gone to reduce noise, and those you always clicked on are more relevant are now more prominent, to increase signal.
You will see that the tools are more informative (like rollovers in Kudos) and that move out-of the way when not needed (like Message actions, that only appear when on rollover a particular message).
You will see that you will clearly recognize where you are at any given moment, that you instinctively will know what you afford to do, that you are aware where you came from and you will easily map the choices where you can go from there.
You will see Related content always cross-pollinating Forums, ideas and Blogs... So you can get the best out of each.
3. Insure that our community feels dynamic
We are holding a few surprises here, but you will soon enjoy real-time metrics on the activity and buzz of each page you are looking at (The "Pulse" of every post, analyzed for all to see!) You will discover a home page with a timeline of who is enjoying the same "Lithosphere moment" that you are, feeling more like an active community site with news feeds, recent activity, etc. Also, our blogs will feel more human, with a design that emphasizes the voice of our top authors. In general you will discover little details everywhere (some long requested by you) such as relative dates ("15 minutes ago" versus "03-11-2009 03:40 PM") to give you with a better sense of freshness and relevancy. Your profile will be more accessible, and the ability to see basic information of any community member will be instant with exciting rollover panels... But enough of this, we will let you discover the rest on your own.
4. Rebranding of our company and services
Lithium is not taking 2009 quietly. We are so proud of our new Lithium 9 engine and powerful new services such as Lithium Insights, that we want to celebrate it in a big way. Our logo still functions just fine, but our colors will go BOLD and confident. I warn some of you: It may take some time to digest... But the goal is to say something different out there, something that is both relevant and exciting (who said that usefulness had to be plain and boring?). We promise you excitement with a range of new colors that are not only refreshing, but navigationally informative: Giving you clear hints of where you are, framing that which requires your immediate attention or pushing to a second plane what is only contextual and supportive to your main task. We are also revamping our avatar collections to a more up-to-date design (more on that on a separate post).
5. Encourage more of your participation!
We are extremely thankful for the veterans that come here every day to participate, but for any new guests (send them our way!) we intend to welcome them into a site that is more clear to understand from the get-go on first approach: With a careful balance between data and editorial... With clear navigation and way-finding markings throughout the site. On each page there will be clear call to actions and these actions will be prominent and easy to understand.
In one word: The new Lithosphere will pave the way with exciting ideas you will be able to recreate with your own communities.
[If you find this new dialogue on Community User Experience worthwhile, we will be back with more commentary and opinion on how to improve your own design efforts in community-building]
