Tuesday, August 5, 2014

Architecture of the Homepage


New URL


Priceless advice from a great webmaster on the psychology behind a modern professional website.


Hi Guys,
Let me take a little time to talk about the architecture of the homepage - it is very precise and we should stick to that precision because we are mirroring user-psychologies with it in order to provide a good user experience. 

-----------------
<header>

Summer hours - give ACTUAL hours, not blurbs or pitches. People want to know when you're open so they can plan and that's what that area is for: critical information. 

------------------
<showcase>

"Do you like wine paired with great food?" - don't ever lead in with a question. Make a statement that catches them. It's obvious they like wine and great food. 

This is a focal point, so the perfect place for the Rare Earth byline "Get a Taste of This." Then follow that with a VERY short piece of text - a hook. This is the web. They won't read the longer stuff, especially not in an area that users have learned to treat as a showcase position.

No tag clouds can go in here. They would be diminished by the background image (which is meant to catch the eye) and they need to stand out. If they are going to be used as a search feature they especially need to have their own pride of place in the site architecture so visitors can find them on any given page without having to back-click to the home page or conduct additional navigation. 

Visitors wouldn't see the tag cloud in the showcase area without mousing over this area anyway, so it's wasted effort

-----------------
<feature>

This area is an extension of the showcase focal area (Get a Taste of This). It is there to drive visitors to any of the three major sections of the site - where they will _then_ find the expanded information. We can't put the expanded information in here because they will not read it. This is a home page, so like the showcase area, this area becomes a headline area although a little more involved because now you are asking the visitor to fork _into_ the site. 

I left instructions for the _length_ and _nature_ of what should go in there. You can see my instructions here:


Once those blurbs are written as I have indicated I will link them to the appropriate areas of the website - where you then have all the real estate you want in which to tell your story. 

--------------------
There should be nothing after the daily menu because it's distracting and de-focuses the visitor. This is not where you talk about the staff and their roles. That goes in an "About" or some other modular area. 

--------------------

Take a moment to truly familiarize yourself with what's happening on the home page - it is carefully architected:

1. Critical contact info, which is the first reason a visitor is there - to learn where and when.  <header>

2. A focal point which is primarily image-drive, with a by-line (hopefully) catchy. This needs to tell them right away what the site is about. <showcase> 

3. A fork into the major sections of the site. <feature>

4. [left] Daily menu changes (article area, which updates frequently and is info a visitor needs _now_, in order to decide whether or not to visit Rare Earth)

5. [right] Daily happenings (latest news, which also updates frequently, also info a visitor needs _now_)

6. List of drinks - this is a wine bar

7. Then below that we can add a few more forks - into food, or mood, or picture galleries, or a calendar, or several TAG clouds. But by the time the visitor gets to this area (already the footer) they have been drawn into the site's architecture and know what the site is about (at a glance) as well as where everything is and what's going on, without once losing their focus or stumbling over anything verbose. 

-----------------
Best rule for writing for the web: less is more

Important rule for writing for the modern web: you don't know what device visitors will access the site on, so again, less is more. 

Codicil to this important rule: we use @media Queries to deliver versions of the site to viewports of different sizes, so in many cases the text has to be customized accordingly (using media query classes to hide or add bits to a text string). So you have to plan for this.

Another important rule: text on the web serves an aesthetic as well as informational purpose. That means length matters - it has to fit in a way that conveys the information without breaking the aesthetic layout. This is even more important when we're working with Responsive websites like Rare Earth, which use percentage and not pixel measures so they can customize content-delivery depending on the viewport.

In brief: write short, write catchy, treat text as an aesthetic element.

---------------
OK:

1. I've fixed the "Our Selection" section.

2. I will fix the Feature area (Drink, Food, Mood) once you get the right text for it - just give it to me and I'll add it because it requires some coding in this instance. 

3. Take the text that's in the Feature area and use it in the appropriate sections of the website. 

4. Do the same for the material below Today's Menu.

5. In the meantime I'll start adding the additional software we'll need, as well as the food categorization/architecture and a couple of other things.

Rich

PS - don't be offended by the above or take any of it personally; we have been doing this for a long, long time. Trust me on it.

No comments:

Post a Comment

Thanks. If you asked me a question, I will get back to you asap