Web User Experience Blog

GeoTrust has launched a brand new product called the Web Site Anti-Malware Scan, which scans and alerts users to potential malware on their systems. This is in addition to its existing SSL Seal for confirming a website's identity.

Seal designs are tricky in many ways. First of all, there is limited space into which many elements need to fit. It's also important to find the right balance between a vivid, noticeable seal, and a subtle, attractive design. The goal is that site visitors see the seal and gain confidence in the safety it provides, but that the seal should not be too visually strong or over-powering on a site where it competes with the site's main content.

The requirements for Anti-Malware Seal were to fit all the elements into a space of 115 by 55 pixels - i.e. the GeoTrust logo, a visual representation of the product, a short description, and a date stamp. Fitting and balancing the GeoTrust logo with the other elements in the seal proved to be challenging as the logo has a very strong visual presence and the limited real estate was difficult to work within. Finding the best image of the product was not easy either. I made many variations of malware bugs, street signs, chemical hazard icons, etc. but none seemed to work. When we finally came up with the idea of using the text "MALWARE" in combination with a street sign meaning "NO", we made a break-through. The representation was clear and effective.

Finally, creating a running light-effect on the "SCANNED" text ONLY added an element of visibility and sophistication while providing the final finishing touch for a seal of approval.

With the passing of Steve Jobs, Apple Co-Founder, I got to reflecting on what are some of the key learnings and takeaways of his design genius that he imparted on our industry and me personally.

1. Design is powerful.
Good design is powerful and something that is well-designed from the inside out has the ability to make a huge impact. Steve Jobs famously said that "Design is not just what it looks like and feels like. Design is how it works." A product that is well-crafted—whether it is digital or physical—can inspire a reaction and action from people.

2. Designs should be tasteful.
Sleek, sophisticated, exquisite, and even cute are some of the adjectives that can be associated with Apple products. Even if something works well but has no design esthetic, it will be a hard sell. Functionality and finesse weaved together are a winning formula.

3. Keep it user-friendly and interactive.
Easy to use, engaging, and fun are what keep people interested and invested. A learning curve is okay but it should be intuitive and fast. Anything new would require some degree of learning. Apple products are easy to use and there is a learning curve but they are designed with the tenets of simplicity and usability in mind.

4. Keep iterating.
To take a page from the Steve Jobs design playbook, even a good design can be improved upon. He kept improving upon his products and making what was already great even better and better.

5. Think different.
Designs that push the boundaries and don't fit the norm but are innovative and futuristic are what epitomizes Apple products. Don't be afraid to think outside the box and be creative in designing solutions that are pleasing to your users.

Same Check. New Name. No Hassle.

The VeriSign Trust Seal which you have come to recognize as a symbol of trust on websites, is undergoing a rebranding and redesign.

The VeriSign Trust Seal will be renamed the Norton Secured Seal. This is expected to happen in April 2012. All VeriSign seals will automatically update to the Norton™ Secured Seal at that time.

The design of the new seal follows the same form factor as the current seal with the circle and pill-shape, as well as the inclusion of the familiar checkmark. The main differences are in the color scheme and copy. The seal goes from the VeriSign cranberry to a golden yellow and gray.

Look for the new seal to morph its way onto a screen near you in April 2012.

To learn what it all means to you, visit www.verisign.com/norton-secured-seal.

Designing a user interface which is solid yet flexible has definite advantages. From time-to-time your interface can and will be put to the test - whether it's something that has to go-live immediately, an update to its branding, a request to accommodate something that doesn't quite fit your model, incorporating a new feature or functionality that's cool but tricky, making something work globally, and the list goes on.

There are many challenges your interface is likely to encounter in its existence and needs to be able to accommodate. Clearly, doing a full-on redesign every time you need to make a change is neither practical nor possible. The interface needs to be adaptable. And, striking the right balance between the usability of the interface and accomplishing your latest UI mission-impossible is critical to the user experience of your interface.

In the course of its lifetime, your interface is likely to be stretched to its limits, it's original rules abused and broken and new ones created, and additions made to it which can seem like extra appendages. It happens to the best of interfaces. The idea, however, is to ensure your interface can stand the test of time. As while you can't plan for what you don't know, you can design your interface to be flexible, adaptable, and scalable - to accommodate the unknown. For example, don't fill every inch of real estate with content, leave room for an extra tab, think hierarchy, and design with CSS in mind. But most of all, have fun with it :)!

I am pleased to share with you the launch of a Symantec Executive blog called ePerspectives. The blog will focus on executive insights and thoughts on the information age as it relates to your businesses.

Authoring the blog is Michael Parker, Vice President of Strategic Marketing, at Symantec. Michael will have regular posts offering high-level perspectives on relevant business issues.

The first post is titled "Cyber Security: A State of Digital Denial". You can read the post here.

The GeoTrust logo recently underwent a slight modification to improve its visual profile. It is essentially the same solid brand logo you know but with a twist. We did a 180 degree switch of the logo elements - swapping the order of the graphical "G" and logo text "GeoTrust". We found that this orientation of the graphical element on the left of the text serves as a stronger anchor for the logo text. It also helps to reinforce the "G" in the logo text by appearing at the beginning of the word "GeoTrust".

No radical change here - just improving on an already strong logo design to make it even better.

Hope you like it! See it live on www.GeoTrust.com.

Last week, we refreshed the GeoTrust homepage to improve the clarity of the content for enterprise SSL. Previously, the enterprise content was being displayed repetitively through multiple pathways. However, this did not provide any additional value. Under the main banner, the content was being displayed in a content box and graphic directly beneath it.

Now, we have condensed the duplicated content into a promotional graphic to reduce the time to the enterprise SSL page. The graphic is front and center, so you will be able to quickly learn more about the enterprise SSL program. During the content revamp, we have also replaced the partners content box with a new graphic about the reseller program.

Additionally, we have revamped the content in the quick links and the existing customers boxes on the right side of the homepage. Content in the old existing customers box was already being displayed in the buy SSL Certificates box, so we removed these repetitive links. The former 'quick links' box has been renamed and now houses the links for existing customers.

The footer now displays the "Glog" (GeoTrust Blog) icon next to the other social media channels.

Let us know what you think in the comments below...

To introduce the new Trust Seal monthly service, we simplified the pricing table. The monthly service is now prominently featured as the first option so users won't miss it.

We reduced the copy in the table to make it easier to follow and understand and thereby, allowing the pricing and savings information to come across more clearly.

Finally, the tabs were also re-ordered to move the 'Pricing' tab to the first position in the tabset.

The below is the earliest known screenshot captured of what the first-ever website looked like.

This early creation still represents the basic tenets of good design and usability. For instance, it is highly readable and provides great contrast with a very basic white background and black text. There is no gratuitous imagery. It utilizes the times roman font-face at a legible font-size. There are blue, underlined links clearly defined which we have all come to recognize as clickable. The page is written concisely with information-carrying words hyperlinked - notice there are no "click here's". And, I bet it scales to any resolution, is cross-browser compatible, and is mobile-browser friendly :).

Twenty years later from when this web page first went live, it is still a winner in terms of ease of use and usability.

(Image sources: info.cern.ch and BusinessInsider)

Firefox 5 web browser is now available. This latest version of the Mozilla browser offers some interesting features which are useful for designers and developers alike and ultimately beneficial to end-users.

Firefox 5 (FF5) provides support for new CSS3 styling features like CSS animations, allowing more capability for leveraging style sheet elements. FF5 also now has an upgraded graphics engine which renders text and graphics faster and sharper and automatically color-corrects images to display exactly as the image data intended. There is also support for open font formats like WOFF, TrueType, and OpenType which means that any font type - regardless of if it is installed on users' computers - will render true to type. This eliminates any limitations around using web-ready only fonts for Firefox users. Additionally, FF5 is providing HTML5 support for video which enables the use of the high-quality video compression WebM format for playing high-def HTML5 video.

We just launched a redesign of the Code Signing Certificates landing page. Our key objectives were to bring the products above the fold, reduce page-to-page clicks where necessary, and surface the requirements for each signing product. We had heard from our customers that we needed to increase awareness of the purchasing requirements and process.

We increased the width of the content area by virtue of eliminating the right channel. We added an interactive banner at the top of the page and integrated the code signing intro video which was previously relegated to the right rail. The banner communicates the value proposition of choosing Symantec over other Code Signing providers. Additionally, we implemented our custom corporate font using the @font-face CSS property which was being tested internally.

Code signing products now display horizontally in a single row, which allows users to view the various code signing certificates available from Symantec. We have also surfaced the system requirements and enrollment process information which was previously buried in the product details page. Now, users will clearly see what is required for each product type before going through the purchasing process. Each product tab will have this information accessible next to its features overview.

Further down on the page, we've integrated value-add info such as customer case studies in an auto-rotating carousel, links to supporting info, awards won, and calls to action for new and existing customers.

Let us know what you think by leaving a comment below.

We all know about using SSL for encrypting logins and ecommerce transactions. But that protection doesn't usually extend across other parts of the same websites.

With the release of the Firesheep extension for the Firefox web browser, its developer Eric Butler has raised awareness of the vulnerabilities of users' Wi-Fi sessions to hijacking, side-jacking, and MITM (man-in-the-middle) attacks.

To understand this issue and how to protect your websites and yourself, we have put together a page which addresses how to Protect Against Firesheep Attacks with Always-On SSL.

As you will see, there is nothing sheepish about our Firesheep page. What I like about this page is that it is visually informative and engaging. We tilted the pendulum on the image-to-text ratio on this page compared to most other pages on VeriSign.com. In this case, it's effective for better underscoring the content and issue in question making it clearer and easier to understand and consume.