Hi Carlos,

Really like the design just needs a little bit of re-thinking. I've added some notes for you!

Hope they help.

Hi Carlos.

First off, that image - wow. It works absolutely beautifully with the black. The way you have combined a black and white scheme with a bright, colourful vibrant image is both original, enticing and beautiful. Well done.

However, issues begin to arise when I take a closer look. Generally speaking, the layout is a little iffy, most notably the footer and header elements, which don't seem to tie in well with the central elements.

The social networking icons look a little awkward, my suggestion would be to use greyscale icons, possibly with a highlight colour. With this design, I strongly suggest keeping the footer and header elements a light grey on a black background, illuminating in a colour, ideally a blue from the image, when highlighted. This will add great continuity and make the design feel more accomplished.

The white on top of the image, for me, works really well, and the white background on the other pages does too. Generally, the central elements are very nearly on the mark but you're let down by the footer and header.

I hope this is useful to you - good luck!

I believe this design is on the right track to giving that "Wow" factor you're looking for. I'm expecially thrilled by the way you're using the slider as a full background image. Bravo on that! But there are a few suggestions I'd like to make:

1. Modern web developers must consider several factors a user might be viewing the website on like the browser and screen size . This is one of the most difficult things to accommodate in a design since we have no way to know what they may be using. With that being said, I can understand why you wrote in the footer the "browser disclaimers". But unfortunately, this simply isn't acceptable in web development any longer (especially 3 lines of browser disclaimers). If you have usability issues on other browsers, then you'll need to write alternate style sheets (which I see you've already done for IE7 and IE6) and remove any disclaimers from the actual web page. They really aren't necessary.
2. I feels there are some alignment issues in your design. Most notably is the slider navigation box vs. the "News - Events - Lectures" boxes. The far left alignment of the slider box is distracting. (Attached an image showing what I mean).
3. The footer area must be stopped from scrolling down on the home page. The black space below the copyright info is unnecessary (Attached an image showing what I mean). I was able to fix it quickly by changing the following code in your master.css file, line 417:

browserContentWrapper {height: 100px}

Otherwise, your typography is good and I really enjoyed your slider concept.

Also, your efforts to make the website even more usable by providing a link to a text only version is a nice effort to make it 508 compliant.

I am going to comment on the usability of this site.

First up:

• Have you carefully considered or surveyed users to find out what is the key information that users will want when they get to this site? Off the top of my head would suggest it is probably opening times, phone number and how to find you. I think you should make all this information much more prominent. Many websites now put their phone number large font in the header. I think this is excellent. Many times when I visit a website that is all I want.

• Have you done a competitive review of other museum websites. I took a look at these: http://www.sciencemuseum.org.uk/visitmuseum.aspx http://www.nhm.ac.uk/index.html http://www.ontariosciencecentre.ca/membersdonors/defau I particularly liked Ontario Science musuems tabs which are all clear calls to action - Buy Tickets, Visit Us, What's On (see graphic below). In each of these information about where and when the museum is open are very clear.

• I wonder about the text size. I like the fact that you provide the option to make it bigger. However when I looked at some of the pages and clicked on the middle text size the page looked much better. I wonder about going with a slightly bigger text size for the whole site? Having said that small text does seem to be the trend at the moment.

Header:

• I actually think you your header is not doing a good job. The Logo is very small it should be double the size. I think the upper level of the menus and the google search box look as if they have just been stuck up there. This is the main banner for the website every word and option needs to be very carefully considered. Again look at some best case examples.

• Purely subjectively I would not use a google search box or at least advertise that it is google. It makes the site look impersonal.

• Tab buttons - There do seem to be rather a lot of them - I wonder if Exhibition, IMAX and Planetarium could all be combined under one item e.g. What's On. About us could probably move to the bottom panel. The wording of the menus could be more clearly call to action like "visit us". Instead of Science you could call it "Research"??

• Using the logo as tab - If you want to use the logo as the tab (which i notice does highlight underneath in blue if you select it) then I think you should probably show it highlighted underneath in the design. This is a slightly unusual way to do it. Not sure that it is entirely natural or expected for the user.

• Tab button Drop down Menus - I like the drop down menus they summarize a great deal of information quickly. The hierarchy is clearly presented. However when you select a menu it is highlighted with a blue line but the highlight is also present to show where you are currently. My personal preference is that only one highlight should be shown at a time. In other words ideally when a menu is selected then the blue line for the current page should switch off. Alternatively you could choose a different colour to do the "where I am going" hightlight. I noticed the Natural History Museum website does this.

Footer:

• Your items in the footer simply represent the same tabs items as the top. This is not buying you anything. The great thing about a footer is you can present the same information in a different way so that users who haven't found what they are looking for at the top can quickly get to the information that they want. Each column should have a header and then a list - so for example the social could say something like follow us:. You should definitely have a link to "contact us", "Jobs" and "Directions". Maybe you should brainstorm the different types of users that will be coming to the site and then think about the options that they might be looking for. I have attached a wireframe of a footer I did recently for an e-commerce site to give you the idea.

• When adding social network items add a specific instruction as to what they are for. Research has shown that the wording "You should follow us on Twitter" (or Facebook) results in the highest uptake.

Homepage:

• I like the fact that the home page is designed to fit mainly within a standard screen size.

• The changing background picture makes the site feel extremely busy especially the spaceman picture. I did not make the link between the background image and the slider. I think it would be much better to choose one of the simple photos (like the space one). For one thing users like to know that they have got back to the homepage. If the background picture is constantly changing I don't think they will that feeling.

• You don't have any feedback on your home page to show where they are. There is no home tab on the top level menu and you have not put in the breadcrumb that is on any other page. These small bits of feedback orientate the user. Coupled with the changing background I think this presents a problem.

• Your sliders are good however I think the feedback in the circles is too subtle. It took me a while to realise that they were indicating how many there were and which one I was on. Perhaps if you shaded the entire circle it would be clearer - I have often seen sites adding numbers to this sort of feedback - it just gives more of a hint that there is more to see.

Menu level pages:

• You have chosen not to go with the standard left hand side column to aid the navigation. Personally I think this is a mistake. This is a big site and users need help navigating it. For example on the plan your visit page the navigation is via a column of text on the right hand side. If you were to provide a navigation bar down the left hand side in addition to this it would mean users didn't have to scroll to find the disability information. Again look at the links above.

• You mention that you are worried about the depth of navigation in the teachers part of the site. Here you have put a second row of tabs. This is a big design no in my book! If you used a navigation column on the left hand side you could avoid this. The great thing about these panes is that it can provide a context for the whole site by showing the hierarchy. You could include things like sign up for our teachers e-newsletter and scholarships in this pane so it was present on every page.

Navigation between sites

• Another navigation problem is that when buying a ticket the user travels to a separate site. However then the only way back to the parent site is to use the web browser back button - sometimes even this did not work for me. This is not acceptable. At a minimum the user should be able to press the logo in the top left hand side and get back to the parent homepage.

I hope this helps. If you have any questions or are interested in more support feel free to drop me a line at lisa@wheatridge.co.uk

Good Luck (:

HOME PAGE

• Initial, quick impression - very attractive and love the boldness of the design; Easy to differentiate main content (mid section) from supporting content (black background)
• As much as I enjoyed the images cycling in the background, it took me a while to realize the images were connected with the white box on the left providing the Title of the show/exhibit. They are visually disconnected. Also, the changing Title isn't on the same 'timer' as the changing background - another reason why I probably didn't connect the two. (SEE HOMEPAGE MOCKUP)

MAIN NAVIGATION

• I appreciate that the navigation is working to make lower-level content more noticeable; however, the visual grouping of information can sometimes be confusing since a hard line is used to differentiate the 2nd and 3rd level items. I would use a line to separate all 2nd level items from one another and then use the indentation of text and/or change in background color to differentiate the 3rd level of info. (SEE NAV MOCKUP)
• Need a slight reorganization of your navigation. The navigation is a mix of nouns and verbs; they should be either all nouns or all verbs. Also, some labels don't completely help identify the items within that section (ex: "Science"). I would recommend a card sorting exercise to help determine groupings, but for now, you may want to consider this option:

Your Visit | Exhibitions | IMAX | Planetarium | Education | Library | Members + Donors | About Us

• Your Visit - should include everything you have today with the addition of "Calendar"
• Exhibition - no change
• IMAX - no change
• Planetarium - no change
• Education - new label for "Learn"
• Library - includes "Annals & Reports", "Bailey Library & Archives", "Science Bites", "Web Collections", and "Museum Magazine"
• Members + Donors - Includes items under "Join" and "Give"
• About Us - Includes everything you have today with the addition of "Research & Collections" and "Curators". I may consider renaming "Research & Collections" to "Departments". Also, I would recommend removing the list of curator names and just have the link to the Curator's landing page since I'm guessing most people may want to search by department as opposed to by name. As a side note, on the Curator's page, I would make the Department name just as prominent visually as the person's Name.

OTHER NAVIGATION

• Secondary Navigation: Secondary navigation at the very top (ex: Press Room / Teachers / etc ) is very faint, which doesn't make it quite accessible to read. It is also redundant to items that are easily found within the main nav and/or footer. I would recommend removing that navigation which will open up that space. Your goal should be to get a user into your content. With too many options at the top, a user can get momentarily 'stuck'.
• Carousel: This is a great feature to use to allow a user to casually browse through secondary content (such as the News on the Homepage); however, I wouldn't recommend it for a page's primary content. For example, on the Children's Workshops page (Learn > Families&Children > Children's Workshop), the workshop for "Grades 4-6" is hidden, when in fact, it should be easily found by simply scanning the page. Also it can be confusing as to why this type of nav was used when there was just one more item to present. To stay in-line with your overall design, I would recommend stacking this content (columns of 3) so that all the necessary info is presented at once. Consider doing this for your Curator's page as well. Finally, the "circles" which let's the user know where they are in the carousel is not clear since there isn't enough differentiation between the blues. Instead of changing the line color, I would just fill in the circle.

PAGE LAYOUTS

• With a few exceptions, I was impressed with the consistent layouts used throughout the site.
• The text for the main content sometimes spans across the page making it harder to read. Consider smaller columns of information.
• Sometimes the main content is only within the right-most column. It should be within the main body of the page because that's where the most important information is expected to be.
• I was pleasantly surprised to see the "You May Also Like" feature since I normally associate that with retail sites; however, many times it takes visual prominence over the main body of information. Or because it has so much visual dominance, I sometimes assumed it was the main information. Also, when I select an item from the "You May Also Like", you should include the picture related within that feature on the landing page so there is that visual association and consistency. This will also help provide an anchor for the main content. (SEE PAGE LAYOUT MOCKUP)

TEACHER'S SECTION

• Should match layout and design with the rest of the site. Right now it feels awkward, as if there is a site presented within the dmns.org site. Suggest putting the nav items as 3rd level items within the main nav and then you can remove that internal navigation within the Teachers' pages. (SEE NAV MOCKUP)
• The "Scholarship" and "Program Catalog" are definitely noticeable; however feel out-of-place. Consider moving the "Program Catalog" under "Resources". Maybe introduce the "You May Also Like" feature within the Teacher's section and include the "Scholarship" info within that.

FEATURES

• Calendar: Interacting with the calendar is quite cumbersome and confusing (how would I select a month?). I would recommend removing the filter options and simply let users select a day so they can see all the events that are happening on that day. If there are ongoing/special events that you would like to highlight, you can list them on the side.
• Videos: I love the big play button! To make the video more appealing, I would have an image for the videos as opposed to a black screen. To engage the users further, you may want to consider having the videos start to play upon arrival (especially if they are short videos).
• Buttons: Buttons are usually recommended for action-oriented tasks (ex: Buy Now ) as opposed to linking to content (ex: View Details). However, because the site has used this so consistently, I wouldn't make this a top priority to update.

Love the design, I think the one thing that I would change my self is the "journey to the stars" box. I would centralise this box and make it wider. It looks kind of lost on the left against the edge of the screen .. apart from that , I love the design and the image used is amazing!

Hi Carlos. Let me start off by saying that I like your design and think it has the potential to be a really great website, but there are key aspects that your site needs improvement on before it can get to the level of greatness. My review is going to tailored to usability and the user experience. First, I'm going to give you some general notes and then give some insight on specific sections of your site.

General Notes

• The Five Second Rule. When a user goes to your homepage for the first time, without having to think they should be able to tell what your site is about within five seconds of being on the homepage. The first time I went to our site, honestly I was a little unsure about its purpose.
• Identify Every Section Every section should be labeled with a title that is suitable for the content in its section.
• Alignment Now this is a rule that I feel can be broken in some cases if done the right way when incorporated with the right design. However, your site does not fall into this category. Everything in your site seems to be aligned within the same parameters except for a few sections. I will upload an image to show you what I mean.
• Friendly Text Studies have shown that people respond better to text that is friendly and inviting instead of being commanding.
• Reconsider your Text Size Feature I like that you are allowing your users the chance to pick the text size that best suits their needs, but at different font sizes your site is thrown off. I suggest keeping it at only one height, and just let your users to zoom in, or style your pages for when the text changes in size.

Now, everything else will be directed towards sections of your site.

Header

• Make your logo more prominent. The main problem with your site not being able to immediately show users what your site is about. The main problem is that it is wide and wide typography focused images offer little to draw the users attention to it. I suggest increasing its size to make it a more prominent part of your site.
• Make your search bar more noticeable Like your logo, it just seems to fade into the background. That is an important aspect of a site and saves users time when searching for something specific on your site. I suggest making the words within it less transparent, make the border around it a stronger color, make the go button(arrow) bigger.
• Strategize your navigation menu better It seems you gave some consideration into it, but you may have overlooked a few things. For instance some of your different tabs can be combined. Like the "Learn" and "Science" tabs, and the "Join" and "About Us" ones as well. Strong organization is important.
• Site Display doesn't need its own section. It would look better with the other links, and the search engine, the level below it.

Footer

• Label the different groups of links. I assume they are grouped that way because each group has something in common. Labeling them with that common trait would top the guess work of what they are for the user.
• Make "Newsletter Sinup" more inviting. As mentioned early, friendly text is more inciting to users and this sounds very demanding. You should change it to Join Our Newsletter or something of this nature. It sounds more like a nice invitation that way.
• Social Media Icons They are completely out of place. I would suggest using something of the style of the mail icon you used for your newsletter. Also, once you change them increase their size so they are more noticeable.

Well, that is all I have to say and I hope that it helps you. ^_^

The design idea is awesome! Combination and the fullscreen sideshow works great. But i think few UI elements icons chosen are not of that quality.

• The drop down has gradient which doesn't look too nice. May be something minimalist might work well, like just pure white.
• 'Journey to The Stars' left alignment, doesn't sound a good idea.
• The slideshow pagination circles looks odd, use something simple like solid black/dark grey circles.
• Newsletter Sign Up icon doesn't go with the design, you need to add something simple.
• Same goes for the social icons, they don't mix well with the design.

The slideshow area catches all the attraction. I think rest of the areas should be minimal. With use of just black, white text/icons, And blue links where needed.

Overall the design is very impressive!

The centering of the main content seems a bit off.

The site should look centered not left aligned.

the blue has a nice cool feel to against the black top bottom borders.

I like the design and colour scheme but think you could benefit by putting a video or something in the top right corner. Something that takes up a bit - but not all of the space.

I really like the gradient of the header, however that is such a LARGE footer you have their. Why?? Make this much smaller, possible with a 20px or 30px padding bottom. It would also be nice to see a jquery function to have not all of the footer information shown, but to be able to slideup into view.

Positive: 1. Nice use of Jquery. 2. Impressive layout for a nature & science site.

Negative: 1. Try to fix the layout in center of the browser 2. Header & Footer need some balance in alignment.

Like the site... Gr8 Work..!

Nice design. But i think u can use space utilization in better way. Bg image is nice but not able to undersatnad y u have kept "journey to the stars" box in the extreme left? Black area is too much. U can add a nice footer in the bottom to give design complete look. rest, nice work :)

First Impressions - You have less than two minutes to communicate the first time a prospective customer visits your site. The site immediately communicates to me the concept of science and innovation. The site is therefore immediately engaging with its visuals. The site name with the persistent banner on the top left ground me in knowing exactly why I am here and the purpose of the site. However, the site also leaves me with a felling that I am “floating” in space, where my attention is drawn to the dynamically changing imagery but with lack of focus on what tasks can be done from this page. To achieve the objective of better usage provide a clearer path to objects that can be used, and in the priority in which typical visitors would want to use the site. To achieve the objective of improved usability consider applying more information architecture rigor, meaning that reduce content, applying more consistent and succinct meta labels, and under those meta labels group like information in well organized hierarchies based on logical grouping as well as priority of use tasks.

Home Page - Aesthetics and Minimalist Design – o Overall the typography is sharp. The use of black (text) and white (background) colors combination is effective in supporting readability, although the content readability was challenging due to the font size.  Consider larger font size throughout the site. o The functions and information presented on the home page although visually engaging leaves you with a feeling of lack of focus with the robust content packed on every page. While the content is valuable the amount of content can lead to cognitive overload.  Consider re-thinking the information architecture or more specifically the layout. The first impression I got is that the page is left page heavy with the imagery, albeit beautiful, being distracting. Group design element types and labels in a layout that map not only to the user’s expectations but also to a priority of task flow. o The carrousel slider concept (seen under News, Events, and Lectures) with its cute navigation to view different types of content is cleaver in the sense that it allows you to view and learn more about the content without having to leave the page. However, the discovering that the arrows exist beneath the images and discovering that the images are clickable but not the actual labels is a bit of a issue in terms of user expectations. - Navigation – o The site affords clear navigation with the primary navigation visible on the upper 1/3rd of the page. And the site makes great use of animation to highlight the navigation element upon which the cursor is hovering. Unfortunately, this primary navigation text or tabs (by this I am referring to the navigation links that includes items such as Plan Your Visit) in terms of accessibility is small in font size and hard to read. In addition there appears to be a variety of links within this primary navigation bar, and even above that bar area there a secondary type navigation links making the upper area rather robust and confusing. In a nutshell by relying strictly on the links in the navigation bar a user is likely not going to discover efficiently the content they are seeking. For instance, planning either a visit or an event sounds somewhat the same, so on first instinct one may select the wrong link.  Consider applying basic information architecture principles to group those elements that are of higher priority in the primary navigation. Consider grouping the elements appearing at the very top e.g. Plan an Event under a meta-label appearing in the primary navigation. For example you could create a meta-label ‘Make Plans’ under which you could have Plan a Visit, Plan an Event, etc. And if you are a teacher then you can also Plan a Classroom Event through this same meta-label ‘Make Plans at DMNS’.  Consider rethinking the grouping of and potential meta-label for items like Exhibitions, Imax, and Planetarium. o Getting grounded: The site offers an effective bread crumb to keep you grounded and give you the ability to navigate back to home. The breadcrumb is subtle yet visible at the top under the banner. o Readability: The site makes effective use of the font size changer to ensure readability, however it may make sense to include a hover over to explain the purpose (even if it is obvious). - Task Flow Support – To improve the usage of the site, first identify and evaluate what purpose the site servers for your key market segments. Can these key end user types find what they need within seconds of being on the site? The current layout and labels leave you with a feeling that the site lacks effective support for task (e.g. I am a teacher that wants to plan a classroom event). o Search: The site achieves the primary goals of most search engines, i.e. a clearly visible box that users can discover and type into, a button labeled search that they click to run the search, and a list of top relevant results, prioritized and appearing in the content area.  Consider the term “Search DMNS” instead of Custom Search in the search box. o Footer: While it may be good practice to make key links discoverable to visitors who have scrolled to the bottom of the page the readability may be challenging for some visitors. Additionally to better promote social media hooks e.g. facebook the visual design may require some fine tuning such as larger images and more color contrast.  Consider placing high priority task or information links at the top of the page’s primary navigation, and less frequently accessed or lower priority tasks in the footer, when re-thinking the primary and secondary navigation’s information architecture. So for example items like ‘About Us’, ‘Contact Us’, ‘Directions’, and ‘Jobs’ could appear in the footer area.

Content Pages - Fitt’s Law of Click Time: In simple terms the farther something is, the more time it takes to click on it. Also, the bigger something is the less time it takes to click on it. So move commit buttons to the right edge of the page, and whenever possible make the target buttons bigger. On most of the content pages, buttons like the View Details or Buy Now are floating under the content text and often to the left or middle of the pages. - Teacher’s Pandora Portal: The unique navigation for the teacher’s portal is a bit confusing. Typically ‘Home’ is in reference to the site’s primary home page. Not to mention that once you start navigating through the sections on the teacher’s page you find the breadcrumb on the top left to be confusing as you see home twice. The secondary navigation bar (with elements like ‘At the Museum’, ‘At Your School’, etc) visually creates more depth, and lack of structure. o Consider a left navigation with content displayed to the right of it. Rethink the content in this navigation and grouping as well as priority of the information. Survey the teacher’s to understand what tasks they perform, what their priorities are, how frequently they perform key tasks, and what language they speak.