Traditionally, icons are placed next to the main navigation text. Next to each navigation category, you have the minimal graphical icon that relates to the text conceptually or literally. The icons are monochromatic and are confined to one or two objects rendered. The icon and text relationship is usually an equal one where one does not take precedence over the other.

IBM’s icons break some of these conventions. They are highly detailed, colorful pieces of ‘abstract art’ that combine a number of disparate objects forming this abstract composition. Below is the icon for food (It’s a combination of a watermelon, a leaf, and a microchip encased in the spherical earth shape with think lines emanating from the top).

Some of the icon rendering is so abstract that it might take the end-user a while to comprehend their meaning. It’s like staring at an abstract painting and looking for the clever meaning inside. That, traditionally, takes valuable time and could confuse and turn off end-users.

Main Weakness:
The obvious weakness in this icon system is the scalability of the artwork. Icons are small in nature (because they have to fit with the main navigation) and they generally should not exceed the 35px X 35px thresh-hold. In their header flyout, IBM opted to use a 32px X 32px sized icons. Here, the text takes precedence over the icons. The icons are so small and so detailed that they are almost indistinguishable.

At that size, the fine detail becomes lost. The majority of these icons are way too detailed and once they are scaled down (32px X 32px) they become hard to comprehend. It’s as if they are best used as larger graphics and not icons.

Branding System:
If this icon system was on it’s own (only teamed with navigational text) it would have been a huge fail for me. In IBM’s case, these icons are part of a larger branding system that appropriates pieces of the small icon artwork in the page design. It uses enlarged closeups of the icon design in large header banners below the main navigation. It also uses repetition almost as if fully knowing that it could take the end-user multiple times to actually comprehend the icon artwork.

There are 3 main places where the designers utilize the icon artwork:

1. The page title below the main navigation repeats the icon at a larger size (45px X 45px).
2. The enlarged graphic utilizes a key part of the icon artwork to further drill home the graphical meaning to the end-user.
3. PDF Icon: The designers finally repeat the icon at the bottom right above the page fold (105px X 105px). Repetition breeds familiarity. 

The icons meaning finally comes to light through the combination of these graphics, together. At first glance, the Education icon is totally abstract. It’s small size (32px X 32px) renders it ineffective and the text is the only characteristic that explains it. Once the end-user traverses to the interior pages they see the large graphics that, in combination with the icons, finally explain the meaning of these intricate and clever graphics.

Footer Navigation:
IBM finally places the icons horizontally in the footer, using a carousel navigational format. This time, the icons are set at a healthy 60px X 60px. Unlike the header fly-out where the text overshadows the icons, here, the icons are primary and the navigational text is secondary.

By placing these icons in 5 total places on the page and by varying them stylistically and size wise, the designers hope to instill them in the end-user’s psyche, break them down, and explain their meaning.

End Result:
As a detached singular unit, these icons are not successful. They are not scalable, readable, and obvious enough for the end-user. As part of IBM’s Smarter Planet microsite, the icons are successful because they are part of an overall graphical system that utilizes them as the nucleus of the overall design and branding. They are not typical icons and straddle the line between icons and page graphics.

IBM gets away with using highly abstract icons in this highly unorthodox and repetitive graphical system because it’s a big company and it could take such a chance. It’s also using it in a microsite as opposed to the main website, where the navigation is ‘text traditional’.

Usability scale: 7.0 out of 10 stars
Creativity scale: 8.7 out of 10 stars

Below is a link to its online style guide where the creators of the site outline the style used throughout the website (colors, layout, fonts) and some architectural principles as well.

BBC’s Style Guide: http://www.bbc.co.uk/guidelines/gel/downloads/GEL_styleguide.pdf

The style guide PDF is a microcosm of the new BBC’s design; flat, readable, and not crowded. It’s funny, I not only read the design rules and guides in the booklet but I also looked at the PDF itself critically and fell in love with its layout and the way it presented the information.

KUDOS to the designers behind this!

The homepage
The home page is quite impressive and it jumps out at you because of it’s clean design, large graphics, and simple 4 part navigational organization. These 4 parts move from top to bottom on the website.

1. Global Masthead

a. Language selection area, sign in, and register
b. Logo, main navigation (the entire website), search field,

UX: In the top navigation IBM uses a different type of a mega-drop-down menu. It’s a hybrid mega drop down accordion style menu.

There are no drop shadows or outer-glows, just a gradient accordian that, obviously, pushes down the content below it.

To close the menu, you either click on the bottom white upward arrow, click outside of the accordion area on the bottom, or click again the on the navigation header.

I think this menu is successful because it allows the end-user to really focus on the menu without being distracted by the background, as in a traditional ‘mega-drop-down menu’ that go over the content.

2. Main Area

a. This is the main showroom, sort of speak, where IBM displays 3 important areas of the website.

UX: Here IBM uses a j-query like animated slide show. There are three small icons on the bottom right of the rectangle that correspond to the main large graphics.

When one story is featured, the main graphic swooshes (animates) from right to left. The corresponding icon is raised higher above the other 2. The story/page is featured for about six seconds till the next story swooshes in.

The main graphic is visually captivating and conceptually relevant to the topic at hand. Aesthetically it also fits the overall branding of the website from it’s large size, to it’s color. Lastly, it’s not bussy (it’s minimal) and negative space plays a large role in the composition.

When an enduser hovers over the icons a tooltip fades in explaining the icon a bit. The tooltip is different from the default ones used (like Facebook) since it’s aesthetically consistent with the overall branding of the site and contains a number of its styles.

The tooltip features a 5+ point opaque border that successfully integrates it with the background and it’s body mirrors the main navigation gradient a bit. It contains the same image as the main graphic and the icon and the heading’s yellow color mirrors the bottom links in section 4. The body text is like the borders, light grey in color.

I personally love these tooltips since they add style, are consistent, readable, and are informational to the end-user.

b. The news section features IBM news/stories that they want to forcefully feature on the homepage. This section is the least conspicuous of all other sections. It seems a bit of a push to place that section on the homepage.

The news section is sandwiched between very visible sections and seems like it was a last minute decision to put it in that horizontal sliver of digital real-estate.

3. The ‘side room’

it contains 5 links but this time each link has it’s own equal sized rectangle with a large icon like graphic, large colorful header, and small explanatory grey text. The rectangles have a subtle outer-glow. Three of the links are visible and two slide in when the end-user clicks on a grey arrow on the right hand side.

Once the end-user hovers over two of them, the rectangle’s outer-glow enlarges and spreads.

The first rectangle contains a flyover and a gateway to a sizable microsite that I will discuss in a later post.

This ‘side-room’ section is successful, albeit the ultra subtle almost disappearing light grey arrow that pulls in the other two stories.

4. The footer

Features 6 categories of shortcut links into IBM’s large site.

UX: The footer, at first glance, seems like part of the header with it’s dark grey gradient chrome like appearance. Let me call this section ‘the permanently open mega-drop-down shortcut menu‘.

This section is organized in 6 categories with the headers standing out with their yellow on grey color.

Since IBM is a huge site, this section gives the enduser a chance to enter the site from six sections. It’s like one last gasp before the user goes elsewhere.

This was a quick look at the revamped homepage. With it’s subtle main navigational chrome, it’s jQuery sensibility, it’s large conceptually driven graphics and mirroring icons, it’s use of tooltips, tasteful gradients, and outer-glows, IBM’s homepage is as successful and progressive as any website that i have recently seen.

I personally love them since they allow the designer to showcase the website and provide the end-user with quick entry points.

I’ve seen only two ways to render the mega drop-down menus. The first is to render it without any differentiation from the background; except for color. The second is to have drop shadows (or outer glows) that lift up the drop down menu from the background.

1.

2.

A third and ingenious way is to combine a mega drop-down menu and a light-box and dim the background when the menu is loaded and light the page back up weh  the menu is not loaded.

3.

This subtle hybrid solution focuses the end-user’s attention solely on the mega drop-down menus that are, at times, like mini web pages.

Some were written in Arabic while others were, clearly attempting to mimic their Western counterparts in style, written in English. I preferred the Arabic ones since they exuded a sense of originality.

Before I begin I would like to show the space that I had while taking these images. The majority were immense pieces of graffiti and the space that was between us was around 6 feet (less then 2 meters). A large number of the images had to be taken at an angle since there was also an 8 lane highway right behind me.

The 1st piece is well crafted and precise.
English translation: ”The call of a revolutionary martyr screams ‘Where are my rights, Egypt?’ ”

Closeup.

The next image is written in Arabic and it translates to: “The people”. The first two letters on the right (Arabic is written from right to left) are in the form of 2 hands holding each other.

The next graffiti is western like and shows a camouflaged like FREEDOM. The freedom theme was prevalent allover the Alexandrian post-revolution graffiti pieces.

A hip-hop influenced EGYPT.

Here, the artists shows support for the army with the word freedom inscribed on the tank.

The next piece ‘FREE FOREVER’ represents a slice of the Egyptian populace. Interesting to note that the women here outnumber the men by 3-2. I find this very symbolic and significant especially in a country that is known to be backwards in women’s rights.

Closeup.

Aesthetically and design wise I love the next image. It’s ‘rough around the edges’ quality appeals to me. As for the Trojan like warrior, I have no clue what’s that supposed to mean…:-)

Closeup.

This following piece is simple, aesthetically as well as symbolically. I also love the rough wall surface and the grimy quality of the surrounding colors. It’s loosely reminiscent of the late Cy Twombly and his graffiti-esque museum paintings.

Ahhh, gota love he irony of a pharaoh saying: WELCOME TO NEW EGYPT. Is that a cynical foreshadow of things to come or is it just my sarcastic graffiti interpretation?

Closeup.

Closeup.

No clue what the first word that is being shouted out is but the second is, off-course: REVOLUTION.

Closeup.

Closeup.

Again, I love the wall surface contrasted with the paint and the imagery. The big letters say, “Egyptian & Proud”. Below that are the names of the graffiti artists and the egyptian flag next to each.

A loose map of Egypt with the date of the revolution (Jan. 25th).

Hot rod like design with a devil’s tail. EGYPT.

This was a huge piece titled: ‘Masr Om El Dounia’. Literal meaning, “Egypt is the mother of the world”. A better translation would mean, “Egypt is the cradle of civilization”.

Closeup.

Closeup.

Closeup.

The key point here is a sense of religious equality and secularization that this revolution was based on. There are 3 Christian crosses to one crescent moon and I love that. The statue of liberty, the eiffel tower, as well as the leaning tower of Pisa are all represented with the pyramids of Giza. Can Egypt, post revolution, work it’s way up and be an equal to these western powers?

I will provide one example below and in the next couple of weeks i will provide a collection of other graffiti examples.

Below is a cartoon that was created on the walls of the italian consulate in Alexandria.

ENGLISH TRANSLATION:
The character with the hat, green shirt, and camera is a tourist. The character with the red shirt is Egyptian. This cartoon addresses salary differences between the Egyptian and the khawagah (a foreigner). It is copied from a newspaper called “Tahrir” and shockingly the graffiti artist gave it credit on the wall of the building above the cartoon.

Egyptian: How’s your salary overseas?

Foreigner: We get $3000/month + $500 instead of food for lunch + $1000 instead of health insurance. I make a total of $4500/month.

Egyptian: After the revolution I make 700 Egyptian pounds.

Foreigner: And these are instead of what??

Egyptian: These are instead of me becoming a bum!!!

Historically, Egyptian salaries are a joke and the cartoon is saying ‘Nothing Has Changed’…

First and foremost, UX stands for user experience. We are the digital architects of a user’s experience online or on a user’s desktop. A UX architect combines a number of disciplines like research, Fine Arts, information architecture, information design, psychology, Graphic design, collaboration skills, managerial skills, and some back-end Knowhow.

UX Architects use all of these disciplines to make screen based (Mobile – Web – iPad) applications usable, progressive, and intelligent for a specific target audience. The work straddles the front-end and back-end in a space that I’d like to call ‘Middle-End’. That space collaborates with Graphic designers,  developers, and project managers in the form of wireframes and workflows.

Digital wireframes are the architectural construct of a digital entity that shows the developers the placement of information and how things will function in the application and will also show Graphic Designers the digital skeleton of the application which will be covered later with an aesthetic shell.

Wireframes occupy workflows. Workflows are a series of wireframes that show how a digital action will proceed step by step, like buying a stock using an iPhone. The UX architects use sequential wireframes (workflows) in a detailed series that show every detail of that transaction.

We are the ‘middle men’ in a sense and wireframes and workflows are our friends.

Next time you get introduced to a UX Architect/Designer don’t put a puzzled look on your face. Now you know what we do. Besides, chances are that you are using many products that crossed our desks and shops.

I was shocked!!

Upon close inspection, I see that this is an advertisement for an optometrist and his glasses’ shop. FOLLOW THE RED ARROW…

The red arrow led to this building with a smaller advert. I personally love the happy waiving Brad Pitt photo!!

Finally, the actual store with the 3rd and final advert. I guess in any successful branding campaign, repetition and consistency is key…:-P