SEO Werkt!

Bloggers have long used “see related posts” widgets to try and keep readers inside their own site. Now, Google+ is lending a hand in that regard with their new Google+ Recommendation Button.

The button is the same one you’re used to seeing, but now, when you hover, you get a suggested list of additional articles for your reading pleasure. Nifty. Here’s how it looks on MarketingPilgrim.

 

I tested this on a few other sites and found a couple of things;

1. Not every site with a Google+ button has the option. It’s supposed to happen automatically, but perhaps there are different kinds of buttons, or perhaps the roll out is still happening. If it’s not working on your site, you should try updating your code to the latest and greatest before panicking.

2. They’re recommended posts, not related posts. I don’t know how Google chooses what to show but other than the fact that they reside on the same site, I didn’t see any rhyme or reason to the choices. They aren’t related by topic. It’s a mix of older topics and newer ones (a real plus) and in spite of what you see here, they aren’t related by author.

3. And speaking of authors, I tested this on sites where I write and the recommendation dropdown never suggested other articles by me. My feelings are hurt by this. I don’t know why Google+ doesn’t like me.

4. I’ve seen a mention that this works even if you’re not logged in to Google+ but that isn’t true. You have to be logged in because (I think) the engine is trying to match you up with stories your friends have seen or promoted. That could be why my own work doesn’t show up in the list.

Anyway, all of that is nitpicking. The new Google+ recommendation button is an excellent tool for content producers. If you’re producing good content, then the button should help raise your page hits and time on site as well as your social sharing numbers. There’s no bad in that.

Join the Marketing Pilgrim Facebook Community

Whilst designing for screens—including Web, mobile and rich interaction applications (RIAs)—you often need to create a prototype to see whether the application works properly before moving onto the development stage.

Prototypes are also essential in Web projects. For example, when you plan an online ordering process, you have to be sure that every step is correct and that no critical elements are missing. Usually, you would create different screens for all pages of a website, ordering process or application workflow, and then describe the connection between them. This way you can see whether the interactions work as expected, you can test the product with different users, and your client can review it.

However, a static prototype is much harder to review and test—usually it is just a bunch of images (with some explanatory notes here and there), and grasping the connection between them may be hard. Why not make things more dynamic, and easier for the client, with the help of Adobe Fireworks?

What Is A Prototype, And Why Should I Use One?

“A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.” — Wikipedia

Using an interactive prototype brings a lot of benefits. The main benefit is that you are able to easily find errors in the interaction flow or the user interface (UI) at a very early stage, before development has even started. Your client can also provide detailed feedback early in the design process. The client will get a functioning demo with many interactions displayed right on the screen, instead of a collection of images with no interaction.

To learn more about the advantages of prototyping, have a look at “Design Better and Faster With Rapid Prototyping” on Smashing Magazine. A couple of interesting articles have also been published on Boxes and Arrows: “Integrating Prototyping Into Your Design Process,” and “Defining Feature Sets Through Prototyping.”

What Is A Click-Through Prototype?

A click-through prototype is an interactive mockup of a website or application that allows you to click through different pages and states and is packed with key interactions.

HTML Prototypes

Creating such a prototype in Adobe Fireworks is very easy. All you have to do is prepare the design for exporting as an interactive prototype: create slices for all interactive areas on the screen, and make pages for all of the different states of the application. Slices can also have hover states and be linked to the various pages. At the end you will create a click-through prototype (also known as an interactive prototype or click-through dummy) by selecting “Export as HTML & Images” in Fireworks. The exported HTML files can be viewed locally in the browser or uploaded to a Web server for reviewing and testing.

Web prototype exported from Adobe Fireworks.

(Interactive) PDF Files

Another option is “Export as Adobe PDF.” The difference here is that interactive PDFs have a somewhat reduced feature set: rollovers won’t work, and only rectangular hotspots will export with their links. The advantage is that you can email the PDF to the client, who can then easily give feedback using the comment tools in Acrobat or Adobe Reader. Keep in mind, though, that Fireworks does not generate a comment-enabled PDF file; you must open the PDF in Acrobat Pro, enable commenting, and then save the PDF before sending it to the client. (Enabling commenting in Acrobat Pro makes it possible for anyone with the free Acrobat Reader to add comments.) Of course, if Acrobat Pro is not an option, then feedback can be provided in any of the usual ways, such as email.

In my opinion, HTML prototypes are a better option. In this article we will show how effective this kind of workflow is in Fireworks. But before diving in, let’s quickly review the main benefits that the “live” prototyping phase brings to a project.

Advantages Of Prototyping

• Get feedback at a very early stage.
• Increase the effectiveness of your communication. Get more detailed client feedback.
• The prototype can be used for usability and A/B testing.
• Find errors early on. Fewer mistakes are made later in the development process.
• Find errors in the interaction flow or UI before development has begun.
• The exported graphics from the prototype can be used for development.
• The developer or team will understand what needs to be done without needing detailed explanation.
• Overall development time will be decreased.
• Minimize the need for development changes
• Your client will be impressed.

How To Impress Your Client

If your client is working with a Web designer or team for the first time, he might not be so impressed by having access to a click-through prototype early in the design process, because he wouldn’t know any different. But if they have gone through the process in the past, then they will probably be very impressed by seeing a live preview of the website right on the screen, with a lot of interaction, instead of a simple static preview or collection of image files.

Personally, I have used click-through prototypes from Adobe Fireworks for over 10 years, with much success and enthusiasm from my clients.

Every client who had experience with Web design was impressed with seeing a working prototype of the website right in the browser. My clients always appreciate this, and once your clients have used one, they will prefer to work that way, too.

A word of warning, though. Be clear that this is just a prototype and that it has yet to be developed into a real application, which will happen once the prototype is approved. Otherwise, the client might expect a functioning website to appear simply by you copying the prototype to the root folder of their domain.

How To Create Click-Through Prototypes In Fireworks

The click-through prototype that Fireworks creates consists of simple HTML files (i.e. HTML with tables and images). But this is not important because the prototype is used only in the early stages of the design process. Once the prototype has been approved and tested by the client, you can continue to the development phase of the website, with semantic HTML and CSS. Fireworks is helpful only for transferring the design to the development stage.

What are the key elements of an interactive prototype? Basically, a prototype consists of pages (and, optionally, a master page), states, slices and hotspots. Let’s review each in more detail.

Pages and Master Pages

To create a click-through prototype, you first need to set up multiple pages in your document. Every state of an application or every page of a website will need a separate page in Fireworks. To create an individual page, you can use the Pages panel. When all pages in a design share common elements—such as a header, logo and main navigation—you can use a master page.

In our example website, we will need six pages (home, products, shop, shop detail, support and contact). They will all have the same header area, with a logo, image and navigation, so creating a master page makes sense. To do so, create a page with only those elements on it, and then (just as in InDesign), right-click on the page in the Pages panel, and select “Set as Master Page,” Alternatively, you can use the options menu on the right side of the Pages panel. Now, every element that is placed on the master page will automatically appear on all pages, which will save us a lot of development time.

Set a master page in Fireworks.

Based on the master page, we can now build all of the pages. Go to the Pages panel and click on the new page icon several times until you have six pages (plus the master page). Then give each a meaningful name. The home page should be named index in the Pages panel, and “Shop Detail” can be shop_detail.

The Pages panel in Fireworks.

When it comes to exporting, Fireworks will automatically name these two pages index.html and shop_detail.html. Now, we can fill each of the six pages with its unique design elements (i.e. not the common elements, which will go in the master page).

All pages created in the Pages panel can later be linked to each other via hotspots and slices (more on that later).

Please note: All elements on the master page will appear in the same locations across all of the individual pages and cannot be moved on a page-by-page basis. So, if one page needs to be different than the master page, you will have to overlay the new elements on the master page’s elements, or use another Fireworks file.

States

To give the client more interactive feedback, you might also want to create hover states for the navigation elements. To do so, open up the States panel, and add a new state by clicking “New/Duplicate State.” If you are using a master page, you can create the second state right on the master page (thus saving a few clicks), and then it will be used on the individual pages. Now in the new state, you only need to place the elements that should change on hover, such as the navigation, links, drop-down menus, tooltips and so on.

The States panel in Fireworks

To show a hover effect for a navigation element, you simply need to place the graphic for the hover effect in this second state. You can change the color of the navigation background or a drop-shadow applied to a text object. All of these would change on hover in the second state (the hover state) in the States panel.

Please note: Fireworks does not use CSS :hover pseudo-classes. Instead, it uses JavaScript to swap the images in the prototype (a traditional JavaScript-based rollover or mouseover). This JavaScript behavior is rather old and should be used only during the rapid prototyping phase. During the development stage, it should be done with CSS pseudo-classes.

The “Add States” option in the States panel

After all hover states have been created, you can reuse them for all pages. If you have a master page, you only have to create a second state for all pages by right-clicking on the States panel, or by clicking “Add States” in the options menu to the right of the panel.

The new state will automatically include all hover elements from the second state of the master page. If you don’t have a master page, you’ll have to copy and paste all hover elements to the second state on all individual pages.

With slices, you are able to define the regions that should change on hover.

Please note: When multiple states are used on the master page for rollovers and image swaps, you need to manually add additional states to all of the other pages.

Slices and Hotspots

Slices in Adobe Fireworks

Slices can be used to define regions that are interactive and that will be linked to different pages on the same website or that even point to external URLs. Hotspots can only be used to generate areas for hyperlinks (internal or external).

Create Slices in Fireworks

To make a hover state, select the Slice tool (step 1 in the image above), and then outline the whole area of the hover element (step 2).

You can also create a slice by selecting an object on the canvas, right-clicking and choosing “Insert Rectangular Slice.” This is often easier, faster and more accurate than using the Slice tool. If you select multiple objects, right-click and then insert a slice, Fireworks will show a dialog box with the option to insert multiple slices (one for each object) or one big slice that covers all of the selected objects.

After you have defined all of the areas, you can use the target in the middle of each slice to create the hover effect (step 3). To do so, click and drag out the target in the middle of the slice back into the same slice. In most cases, it will be the same location, so it has to be pointed to the same slice (step 4). If you want to show another image on hover, then the target must point to the slice with the image; but in the most cases it will be pointed to itself. Then Fireworks will ask you which state to choose for the image swap (step 5). Here is where you would pick the state with the hover image (for example, “State2”).

Preview the design in Adobe Fireworks

After repeating this step for all hover areas, you can look at the result by clicking the “Preview” button in the top-left of the Fireworks PNG document.

For hover elements that appear on every single page, such as the main navigation, you can save time by creating the slices in the master page.

To help you, Fireworks provides some visual associations for slices (green) and hotspots (blue); and the Property Inspector panel (or Properties panel) will also show the slice or hotspot type. Standard slices and hotspots are semi-transparent, but HTML slices are opaque. You can also assign custom colors to slices and hotspots—useful if you want to differentiate the types of code that have been placed in them (HTML, JavaScript, embedded Flash objects and so on).

Please note: When using states for rollovers, copying or sharing background elements to the other states is sometimes necessary, otherwise blank areas might appear on rollover. For example, if a slice is larger than the object that will change on rollover, then the background behind the object will also need to appear in the rollover state (state 2). I recommend using “Share to states” for elements that will be the same in all states to maintain a consistent appearance during rollovers (or on hover). “Share to states” is accessible in the Layers panel (right-click on the layer that needs to be shared to the mouseover state).

Linking Pages

Now that all interactive elements have slices, the pages can be linked to each other. To generate hyperlinks, you would typically click on a slice (or on a hotspot, if no hover effect is needed) and enter a URL in the “Link” field in the Properties panel. For an external URL, you would enter, for example, http://www.google.com; for an internal link, you have to enter the name of the page from the Pages panel. All page names from the Pages panel are also available in the drop-down menu there, which prevents typos.

Linking pages in Fireworks

The names of the pages in the Pages panel should be Web-friendly (i.e. no spaces or special characters). You can check out the demo prototype you have just created, with all of the hyperlinks and interactive areas, by clicking on File → Preview in Browser → Preview All Pages.

Add Real Interactivity To Your Prototype

Many Fireworks users do not know about HTML slices. For every slice, there are three different options in the Properties panel (foreground image, background image and HTML). With foreground and background image, you can specify the exporting mode for images if you are exporting HTML and CSS out of Fireworks.

Slice types in Fireworks

For click-through prototypes, which are based on HTML and images, the default “Foreground image” option works best. If you want to place different types of interaction in your prototype, the HTML slice is a good choice. You can place any HTML code in an HTML slice, which is very efficient if some elements already exist, such as interactions. Thanks to HTML slices, you can easily insert Google Maps, videos, animations and so on right in the prototype to show the client how the elements will function.

Embed Google Maps

What if we wanted the “Contact” page to have an embedded Google Map? You don’t need to take a screenshot of a map area to indicate the presence of Google Maps. In Fireworks, you can place the actual map itself right in the prototype.

Using HTML slices in Fireworks

To do so, select the Slice tool (step 1 above), and draw a slice over the area where you want to show the map (step 2). Next, change the type to “HTML” in the Properties panel (step 3). Now an “Edit” button will be available (step 4) that opens up a dialog box where you can paste the HTML code into the slice (step 5).

Next, go to Google Maps, locate the client’s office on the map, copy the iframe HTML code for embedding, and then paste it into the HTML slice.

The HTML slice in Fireworks

The width and height of the iframe should have the same pixel dimensions as the slice. Review the embedded map in the prototype by going to File → Preview in Browser → Preview in…

Embedded Google Map in the Fireworks prototype

See an example of Google Maps embedded in a prototype of a website made with Fireworks.

Embed Video

Video can be easily embedded in the prototype, similar to maps. Go to the video that you want to embed (whether on YouTube, Vimeo, etc), and copy the embed code of the video. To see a live preview of the video, go again to File → Preview in Browser → Preview in…

Please note: The embed code will set the width and height of the video. The HTML slice in Fireworks should have the exact same dimensions in order to keep the proportions correct.

Embed Flash Animation And More

With an iframe, you can embed everything in a live prototype. Just place the element you want to embed in an iframe, and paste the code in the HTML slice. So even Flash animation, video and other elements stored on your own Web server can be easily embedded.

Of course, HTML slices are not limited to Google Maps and Flash video. Anything that can be wrapped in an iframe can be put in an HTML slice, including JavaScript and AJAX elements, JavaScript animation, HTML5 and CSS3 animations and much more. For example, with Adobe Edge, you can create animation and interactivity based on HTML5, CSS3 and JavaScript. Even Adobe Edge animations and interactions can be included in a Fireworks prototype. Alternatively, you could make your own HTML5 and CSS3 animation, and paste the code directly in the HTML slice. So many possibilities!

Export The Click-Through HTML Prototype For Review

The final step of the process is to export the prototype for review. Before doing this, you can do a quick preview in the browser to make sure everything works as expected; go to File → Preview in Browser → Preview all Pages in Browser. Remember to select “Preview all Pages…”; if you select “Preview in…,” you will only see a preview of the actual page, and the links to other pages will not work. If you choose “Preview all Pages…,” you will be able to see all pages, with all interactions and internal links working.

Fireworks preview in the browser

Try everything out before exporting the live prototype. If everything is functioning properly, you can then export the click-through prototype by going to File → Export…. In the dialogue box, select “HTML & Images,” “Export Slices,” “All Pages,” “Include Areas Without Slices” and “Images in Subfolder.“

Options for exporting your prototype in Fireworks

A Couple Of Live Demos

See an example of a prototype with very basic interactions—such as mouseover states, linked pages and an embedded Google Map—exported right away from a Fireworks PNG file. (Feel free to explore the pages and available interactivity.)

Another method is to export an interactive PDF by going to File → Export… and selecting “Adobe PDF” as the exporting format. The PDF can then be sent to the client, who will be able to review the website and interactions offline and then provide you with feedback. See also an example of an interactive PDF (an HTML live prototype is a more elegant solution, but it’s good to know that there are other options).

A Word On The New Mobile Web And Fireworks

While preparing interactive prototypes with Adobe Fireworks can be fast and easy, they are not responsive or adapted specifically to the modern mobile environment. Luckily, the Export Responsive Prototypes with Adobe Fireworks extension by Matt Stow and Touch Application Prototypes (TAP) for Adobe Fireworks, are here to help! Both extensions are free and will help you build responsive Web prototypes or iOS prototypes in Fireworks with greater ease.

Acting On Client Feedback

Finally, what do you do when the client provides feedback on the prototype and the interactions?

In Fireworks, acting on the client’s feedback is very easy. All you have to do is to make some adjustments to the design (based on the client’s notes and comments), re-export a new version of the prototype for review, and upload it to a test server. The whole process can be done in minutes, and you can make as many design changes and iterations as needed.

Fireworks fits perfectly in the workflow of a Web or mobile app designer. You can do the whole design in Fireworks, or you can import artwork from Photoshop or Illustrator and continue in Fireworks. The layout for all of the pages of the website can be easily created with the Pages panel, in combination with the master page feature. To add interactivity, you can set all of the different states of the website, with the help of the States panel. This whole process is fast because Fireworks is optimized for this type of workflow. Slices and hotspots enable you to link all pages to each other with ease.

Both the designer and client benefit from an interactive prototype. While preparing an interactive prototype certainly takes some time, it will more than pay off during the development process.

Further Reading

• “Create Interactive Prototypes,” Adobe TV (video)
• “Design Better and Faster With Rapid Prototyping,” Lyndon Cerejo, Smashing Magazine
• “Integrating Prototyping Into Your Design Process,” Fred Beecher, Boxes and Arrows
• “Defining Feature Sets Through Prototyping,” Laura Quinn, Boxes and Arrows
• “Touch Application Prototypes (TAP) for iPhone and iPad, using Adobe Fireworks,” Matthijs, UNITiD

(al) (mb)

---

© Andre Reinegger for Smashing Magazine, 2012.

Less than a day after Yahoo announced a design and features upgrade to their image search, Bing announced the same.

Bing said that their image search “makes up 7% of all Bing searches.” Wow. Because of that and because Bing Search has an overall new look, Bing decided to clean up image search.

The changes include:

• Bigger thumbnails
• On hover magnifying glass
• Filter bar
• Search suggestions
• See what’s hot
• and more…

Forum discussion at WebmasterWorld.

OS X: I’ve always liked the idea of hot corners, but they don’t come with a ton of different options—plus I’d end up accidentally setting them off all the time. CornerClick changes your hot corners to activate with a click or a long hover, so you won’t accidentally activate them, while also adding tons of other actions you can perform. More »

Google this morning is announcing a new look for its social network, Google+, which introduces a revamped navigation, with drag-and-drop elements and actions that appear when you hover over each item, as well as the introduction of new features aimed at making it easier to discover conversations to join, new profile pages, a dedicated page for Google+ Hangouts (Google+’s multi-person video chat offering), and more.

It’s interesting that Google+ has now changed its design, after its first efforts received such praise. But, after using the service for some time, it became clear that Google+’s navigational elements became a little cluttered. That “share a YouTube video” feature, for example, which popped out a box on the right side of the screen, felt tacked on.

The new interface drops the static icons at the top and moves all the navigation off to the side, allowing users to reorder the icons as they wish. The list includes access to all of Google+’s features, including Hangouts, Photos, Circles, Games, your Profile page, an Explore option for browsing the site, and an icon called “More” which will hold all the icons you don’t care to see.

As you hover over each icon, related actions will appear. For example, hover over Photos for access to a big red button to “Add Photos” from either your phone or your albums.

The Explore icon is also a new addition, and takes you to a page showing the trending and popular content across the network.

Meanwhile, Google+’s version of the News Feed has been redesigned, too, and now features full bleed photos and “conversation cards,” which better separate each post and the discussion from the next by wrapping it in a box. Activity surrounding the content – like how many people “plussed” it or re-shared your post – is also now available directly beneath your shared item in a drop-down box (the “activity drawer”).

Hangouts, which have always been one of the network’s main selling points, are now being better highlighted in the refreshed site, and now have their own dedicated page, featuring a list of Hangout invitations from people in your Circles, easy access to live and public Hangouts, and a rotating billboard showing popular Hangouts, and other information.

There are other improvements, too, including a new profile page with bigger photos, and a new chat list that’s now in off in the sidebar.

In highlighting the new features, Google also mentions that Google+ now has over 170 million users. However, it’s still counting those who share via Search, Gmail, YouTube and other places across Google’s network – so, again, it’s not a real count of how many users are visiting Google+ as a destination of its own.

Microsoft has announced on the Bing Search Blog an update to their video search features. Bing Video added larger video thumbnails when you hover over video results in the search results. They also added infinite scroll when you view videos on Bing Video. Additional search refinements for related…



Please visit Search Engine Land for the full article.

When users land on your website, they typically read the content available. Then, the next thing that they will do is to try and familiarize themselves with your website. Most of the time this involves looking for navigation.

In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques. As they offer an intriguing user interface and interaction, this often borderlines with what is ultimately defined as an enjoyable user experience. Should aesthetics, originality and creativity come at the expense of usability? Can they reside on the same website in harmony?

These themes will be explored through a brief analysis of eight portfolio websites, carefully selected by the Smashing Team and, well, scrutinized by me! My critique will encompass a blend of usability and user experience guidelines, as well as personal opinion based on my experience. Please feel free to provide your opinion in the comment section beneath this article. Also, kindly note that the websites are presented in no particular order.

Dawid Wadach

My first impression of Dawid Wadach’s website was “Whoa! Mine-sweeping! That’s surely not good usability!” For those of you who are not aware of the meaning of the term “mine-sweeping”, it refers to the the action of moving the mouse pointer over screen components (usually images) to reveal links. Although children like to mine-sweep in order to find links, both teenagers and adults hate it.

The apparent absence of navigation is the first noticeable thing on wadach.com.

It was only after stopping to read what I was randomly and rapidly uncovering with my mouse that I actually noticed that the hidden parts contained the portfolio of websites designed by Wadach. At this point I sat back and started looking for the website’s navigation.

Hovering over the white area uncovers some of the projects undertaken by Wadach.

To be fair with Dawid, the menu is indeed visible as it’s located in the form of a button right next to his logo. My criticism towards this implementation is that after hovering over this button, I expected it to automatically show all the menu options. This was particularly true because there was no visible change in the menu button, nor on my mouse pointer when I hovered over it. Indeed, you need to click on the menu button in order to be provided with the main navigational elements.

That, in my opinion, is not good practice, and I feel that the main menu could have very easily been rendered visible at all times without altering the visual element of the website. Indeed, that is what Dawid did, although he wrongly placed it in the website’s footer.

The main navigation menu on Dawid Wadach’s website.

On a more positive note, with regards to the hover effects of the main menu, they are very clear. The font itself is large and contrasts very well with the semi-transparent black background. The website also includes utility navigation at the top left hand corner, which is a good location for such navigation. It also includes features to share the website via social networks and to remove the mine-sweeping effect at the bottom left and bottom right hand corners.

Ironically, the links to all these features contain a hover effect on mouse-over (unlike the main menu button), which is a good usability practice. Additionally, the designer opted to change the user interface of the browser’s scrolling. In general, this is not a good usability practice, as it makes it harder for the user to locate and use the scroll. However, in this case the change was only done for aesthetic purposes, and the scroll interface does look like and behave like users would expect it to.

Conclusion

In conclusion, I feel that from a design and development perspective, the website is very well implemented. It makes great use of HTML5, CSS3 and JavaScript to provide a smooth and pleasant user experience. It is minimalistic and clean, so the user is not overwhelmed with clutter. From a usability perspective, though, I think that slight improvements to the navigation—especially making the main navigation visible at all times—will result in greatly improving the overall user experience, without affecting the whole look of the website.

Harry Vorsteher

When you’re greeted by a Flash animation explaining to you how to use the navigation (before actually seeing the website itself), well, it’s not a good sign. I personally think that the majority of users would do the same as I have, and close this animation before trying to understand what was being explained.

Users have become accustomed to certain conventions and are never eager to divert from the way they expect things to look and behave. Therefore, introducing a new, complex navigation mechanism was not a very good choice from the website’s designers (from a usability point of view).

The website greets its visitors with an animation explaining how to operate the navigation.

Upon closing this animation, users are greeted with two groups of navigation links, presumably linking to photo galleries. The reason why they were grouped in this way is not apparent until one clicks and drags the big wheel that lies at the center of the page. Depending on whether you opt to turn it clockwise or counterclockwise, this will scroll the photos to the right, or to the left, respectively.

The wheel mechanism that needs to be mastered in order to navigate through the website.

Provided that you notice and understand how to work the wheel navigation—as well as clicking on any of the categories as a means to see the photos in thumbnail format—navigation is painful, but bearable. But the excruciating pain comes when you opt to click on any of the thumbnails to see the large version of the photos.

The website background changes from light grey to a darker shade of grey, the photo occupies a large portion of the screen, and the navigation disappears. The mouse cursor also changes to a “left arrow” when you are close to the left-hand side of the screen, a “right arrow” if you are at the right-hand side, and a cross with the words “close” if you are at the very center.

This will enable you to see the previous photo, go to the next photo or close the current photo respectively. Unfortunately for the user, there is too much movement with the mouse cursor changing shape, the photo moving along the y-axis (depending on the mouse location), and an irritating pre-loader for every mouse click.

Horizontal and vertical scrolling (without scroll bars) is essential for viewing each image.

Moreover, if the user opts to click on the full-screen option, this removes the browser’s chrome, and further complicates navigation. In my opinion, this website basically sums up why Flash has been branded as evil amongst all usability and user experience professionals.

Conclusion

To sum it up, the user interface and the photos present in this website are truly nice and inspiring, as is the capability of the Flash developer. The navigation itself is very interesting and complex to develop. Thus, from a design and development perspective, the website is truly one to admire. However, I personally think this website is a usability nightmare, and it will inevitably lead to user frustration.

Because of its flexibility, Flash allows room for abuse. Unfortunately, several designers are more concerned with showing off their expertise rather than focusing on the user.

I am not particularly fond of the choice of using Flash instead of JavaScript libraries to create the animations for the galleries. Without resorting to recommending a re-design of the entire website, I think that some quick fixes would be to create a conventional menu which could be visible on every page of the screen.

Also, the photos in the galleries themselves should be re-sized to occupy 100% of the screen size (vertically and horizontally), thus removing the need for the users to scroll in order to see the full image. Finally, the images should be of a lesser resolution so as to minimize their loading time (and quite possibly remove the need for a pre-loader to appear for such a lengthy time as each image loads).

Justin Lerner

I love Justin Lerner’s navigation (and yes, it just happens that he also has an awesome name as well!). Joking aside, I think this website proves that usability can indeed be aesthetically pleasing. The main menu is conveniently and prominently placed horizontally, just below the logo. This is the exact place where users are most likely to search for it. It contains just five items, each of which corresponds to the five sections of the website. The font is large and visible, and each menu item changes color on hover.

This website adopts a grid approach so as to facilitate navigation.

Interesting too is the fact that the content belonging to each category is rendered more visible on mouse-over whilst highlighting the menu item to which that category belongs. When clicking the menu item or section, it expands in order to show the full content of that section. This implementation enables all of the website to be visible on a single page without cluttering the user interface.

The selected section takes center stage by expanding over the inactive ones. It is also highlighted in the second menu at the top.

What I am not entirely convinced of with this website is the need for the duplicate menu that resides just above the main menu. From an aesthetic perspective, it is modern and blends in very well with the overall look and feel of the website. However, from a usability perspective, having two menus with the same content usually confuses users as they try to click on the same-named section in both menus to see if it’s loading any different content.

Still, in this particular case, the smaller menu is doubling up as a sort of breadcrumb in order to show users which section they are currently viewing. Yet again, breadcrumbs have their own, specific usability guidelines, and it is recommended that they are adhered to.

The secondary menu (brown) replicates the same items as the main menu (grey).

Conclusion

In general, I feel the designer here did a great job in blending great design practices and good coding techniques to provide an aesthetically pleasing (and generally usable) website. Slight modifications can be introduced to improve the usability without adversely affecting the design, such as removing the duplicate menu and replacing it with a breadcrumb trail (although I seriously doubt that a breadcrumb trail is needed).

Additionally, the website would be better off from a usability perspective if more white space is introduced and the typography is more contrasting, since one needs to hover over the content in order to distinguish it well from its background.

Shelton Fleming

My experience with the Shelton Fleming website was very particular as it started off on a bad note, but quickly transformed into a most enjoyable one as I browsed through it. What ticked me off initially was the first screen that greets you when visiting the website; this consists of a yellow box containing the word “Ideas” in grey, and a grey box placed next to it containing the word “Experience” in yellow.

Visitors are greeted with a splash page-like screen that fails to explain the brand identity in an obvious way.

The apparent lack of navigational elements frustrated me because I mistook this page with a splash page (which is a big no-no in usability since users can’t stand them). It is only when revisiting this page (after spending some more time on the website) that I noticed that the conversion of ideas into experience is actually the company’s tag line. Viewed from this perspective, this makes sense from a user experience perspective, as it emphasizes the company’s branding.

The website’s hierarchy and navigation is clearly indicated through imagery and normal conventions such as highlighting.

In fact, the concept of “Ideas” and “Experience” dictates the website navigation—each section resides at opposing ends of the screen along the horizontal plane. Hovering over each of the two sections reveals a vertical side menu with intuitively-named, visible menu items. Good usability practice is also implemented through the changing of the menu text on hover.

Also, the arrow that appears on hover is a good indication to the user that the content of each menu item will be displayed right next to it—something which actually happens when clicking on the menu items.

Color is also effectively used to indicate hierarchy and navigation options.

Conclusion

Consistent and intuitive navigation, large sans-serif fonts contrasting sharply with their background, unobtrusive imagery, and ample use of white space makes navigating through this website an enjoyable experience. Still, I would recommend removing the splash page-like design that is set up to greet visitors. It offers very little information about how it should be interpreted. Moreover, there is a very strong branding element throughout the website—thus eliciting very little need to have a page at the beginning that risks irritating users.

Chris Wang

This website prominently revolves around the projects that Chris Wang has undertaken. In fact, the first thing that one sees is a list of project titles and accompanying icons that open up in an accordion style when clicked on (revealing a gallery of images related to the project in question).

At first glance it’s not immediately evident that this is a list of projects undertaken.

The project titles have a sleek orange transition on mouse hover which indicates that they are clickable. One point of criticism would be that the list of projects is not immediately evident as to what they are—the word projects next to the first listed item is a grey barely lighter than the background.

The accordion effect is coupled with a horizontal gallery of the project being viewed.

Additionally, the website offers a handy keyboard navigation mechanism that uses arrow keys to enable rapid (albeit sequential) browsing of the projects.

A horizontal dark yellow fill is used to indicate what is clickable.

Conclusion

Overall, the navigation is quite intuitive. It is relatively easy to switch from one project to another, and to drill down to see more screenshots from the same projects. One aspect that can be improved is the ability to close a project after viewing it, since a project always needs to be open at any given point in time. Although this first project will be replaced by clicking on a new one, the project currently being viewed takes up precious real estate that would be better used by showing the list of projects.

Jessica Caldwell

This website makes extensive use of mine-sweeping for the purpose of navigating, effectively breaking all navigation usability conventions. In a desperate attempt to find information about the owner of the website, I scrolled below the fold and located the footer which contains a list of non-clickable items grouped under the titles “Agencies” and “Brands”. The only links in the footer are those for social media and portfolio websites of the website owner (all of which link to external websites).

Navigation in this website is only visible on mouse hover.

Defying the odds that a user would still attempt to browse the website at this point, I decided to mine-sweep each diamond present in the home page in order to locate basic information (such as a biography of the author and contact details). It is at this point that I noticed that the diamonds contain both items that would be classified as projects done by the author, as well as the website information that I was looking for. In a typical mine-sweeping implementation, there is no apparent hint as to which diamond holds which information.

One of the projects uncovered by hovering over the diamond shapes.

Clicking on any of the items in the diamonds results in the content being loaded inside all the other diamonds, with the navigation retaining its place on the same diamonds. From a visual perspective, the result is quite appealing. However, this does not improve the usability in any way.

Clicking on any of the navigation items opens content in the same diamonds used for navigating.

Conclusion

The website offers plenty of white space—something that generally is good for usability. Aesthetically, it’s also very pleasing. Thus, in my opinion to improve the usability, the main focus should be on improving the navigation by placing a conventional menu in the top part of the website (maybe repositioning the logo towards the top left-hand side) and placing a simple menu to its right.

The diamond design for displaying content can be retained, as I think it effectively contributes towards the identity of the author. Still, I would make it occupy less vertical space so that the footer (or at least the top part of it) is visible above the fold. In this way, users will notice that the website contains a footer.

Whether or not to include clickable links inside the footer is something that the author ultimately needs to decide—replicating the top navigation inside the footer is never a good idea. However, converting the items inside the footer into useful, deep links (perhaps to specific projects that highlight the capabilities of the author) will help.

McCormack & Morrison

I personally think that with this portfolio website, the design agency McCormack & Morrison have done an excellent job translating their slogan “Good Old Fashioned New Media” into a visual experience. Indeed, the website has a strong brand identity and an almost retro feel, with powerful, bold typography.

The only links in the home page are the logo and an “About Us” link, correctly located at the top left and top right hand corners, respectively. Although the “About Us” link is disguised as a speech bubble icon, it makes use of the title tag so that it displays the text “About McCormack & Morrison” on hover.

The company’s tag line is used to create a strong brand identity to greet its visitors.

Perhaps less optimally located (although at least above the fold) is the “Our Work” button at the bottom right hand corner. I say “perhaps” because I wouldn’t classify this placement as a usability failure, since some people will actually look just above the fold of the website in order to locate a footer. Also, the link is in the form of a button—which in itself encourages users to click on it. Missing this button would really be a pity, because this is when you would realize that the website is indeed a one page website—it scrolls vertically to reveal projects undertaken by the agency, and horizontally to see more screenshots of the same project.

The projects can be viewed either by using the arrow keys or the navigation at the bottom of the website.

When viewing these projects, the “our work” button is replaced by arrow buttons that facilitate the browsing of each project. Although it is not mentioned on the website (which is a pity, really), the fact is that you can easily navigate through the projects using the keyboards’ arrow keys. This enables a very pleasant, yet rapid navigation. Another usability plus is that the website effectively makes use of the screen’s full width.

The company devotes a lot of importance to branding—hence the reason why each project starts off with the client’s logo.

Conclusion

In my opinion, McCormack & Morrison got most of their usability right. What I would introduce would be the ability to navigate through the projects in a non-sequential manner. While this isn’t a major issue with this website (as it only has four projects), it would be very tedious to have to go through a number of projects in order to reach the one that is interesting to the user visiting the website. Another issue is that there is no hint as to what project will be viewed next without actually having to visit each and every project.

Moka

Argentinian design agency Moka is well aware that its website will attract potential South American, Spanish speaking clients. So instead of offering the standard language changing mechanisms, it makes use of its website visitors’ IP address in order to provide the site in English or Spanish—depending on their location. In fact, manually changing the “/?lang=en” parameter in the URL to “/?lang=es” will yield the Spanish version of their website—this is good usability.

With an apparent lack of visible navigation, this website had to include navigation instructions at the bottom left side.

However, I would still provide a mechanism for users to know that the website is being shown in this language specifically for them, and provide a facility to change it to select other languages. This is because the user may be visiting the website using a device that is not theirs. Additionally, they may feel more familiar with one of the other languages that the website offers.

Samples of each project are rendered using the full size of the screen.

Back to navigation. The first thing that you’re greeted with is an abstract design along with the Moka tag-line. Having the company’s tag-line and logo prominently displayed is always good usability practice, because it informs your visitors what website they are visiting. But there is no apparent menu on the website.

Navigation becomes visible in the form of arrows that appear at both ends of the abstract design when one hovers over it. Implementing the website’s navigation in the form of mine-sweeping is never a good usability practice. To give credit to Moka, they do include instructions on how to navigate their website at the bottom left hand corner of the screen.

However, due to the placement (as well as the low-contrast the text has with the background), this is not immediately visible. Then again, if navigation is intuitive, one would not need to provide such instructions.

Clicking the navigation arrows enables the user to browse in a sequential manner through a number of projects undertaken by the company. As previously mentioned, the problem with this type of navigation is that the user needs to go through projects in a sequential manner without getting a hint of what the next project will show.

Also, the project description is barely visible, as it is located at the bottom left-hand corner of the screen. If the user fails to see it, then they will not be able to understand what they are seeing.

On mouse-over, the logo doubles up to show the “About Us” and contact information.

Another usability problem I found is that the logo breaks the convention of being clickable in order to go back to the home page. Apart from the fact that this practice is almost standard today, the website doesn’t offer any other mechanism to go back to the home page other than having to go back sequentially using the arrows.

This is something that is most likely to cause user frustration. Hovering over the logo provides the “about us” and the company’s contact information—not a bad idea in order to keep a clean user interface. However, it is not intuitive enough, since users will normally hover over your logo in order to go back to the home page.

Conclusion

To end on a more positive note, the website is clean, minimalist, provides ample white space, and prominently shows the company’s portfolio—all of these will provide a positive user experience. Introducing the ability to select which projects to view (and to view them in a non-sequential manner) would by far improve the user experience. Additionally, sticking to conventions such as providing better mechanisms to go back to the home page, being able to view the information about the company, and how to get in touch with them, would also be beneficial.

Final Thoughts

Even through a brief analysis of these portfolios, it is evident that a website can be usable while at the same time having a pleasant user interface. While there is still room for even more interpretation, it’s clear that one needs to be very careful to keep in mind that a website has one focus: enabling its users to achieve their objectives—this is ultimately what usability is all about.

In the case of portfolio websites, the users’ objectives may include knowing more about the owner of the website, viewing the projects undertaken by that owner, or contacting the owner. The objective to identify (as well as develop and design) what needs to be achieved is a tough process—but also one that will inevitably lead to a healthy return on its investment.

(il) (jvb)

---

© Justin Mifsud for Smashing Magazine, 2012.

Google is providing AdWords users with a new way to figure out whether their ads are approved, or not, and why. The new feature is expected to be especially helpful for folks placing ads in categories restricted by the company’s advertising policies. To view an ad’s status, hover over…



Please visit Search Engine Land for the full article.

When you’ve run out of space on your desk, do what Flickr user sninesix did: make everything float. Rather than leaving the speakers and extra monitor to hog so much desktop real estate, they now hover above and to the sides so there’s plenty of room to work. More »

Peter Linsley, Google Image Search product manager, announced Google Images is rolling out a new feature to make the related search results more visually helpful.

In this new rollout, you will be able to hover your mouse over the related search query and see the first thing images that would show up for that related search, without actually clicking on the related image search. I don’t see it yet, but here is a picture from the Google blog:

This is a nice little feature that I will find handy in the future.

Google said they are rolling it globally over the “next few weeks.”

Forum discussion at Google Web Search Help.