Web User Experience Blog

Designing the GeoTrust Anti-Malware Seal

2011-10-20T21:28:12Z

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.

5 Things Steve Jobs Taught Me About Design

2011-10-08T05:13:14Z

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.

VeriSign Trust Seals Gets A Redesign

2011-10-05T21:16:09Z

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.

Design User Interfaces With Flexibility In Mind

2011-09-10T02:05:13Z

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 :)!

Launch of ePerspectives Executive Blog

2011-08-31T23:20:30Z

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.

GeoTrust Logo Gets A Sharper Profile

2011-08-15T21:26:02Z

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.

GeoTrust Homepage Facelift

2011-08-01T21:12:39Z

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...

Introducing Trust Seal Monthly Service

2011-07-07T20:24:01Z

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.

What The First-Ever Website Teaches Us About Usability

2011-06-30T17:40:57Z

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 Offers Improved Text And Multimedia Capabilities

2011-06-21T20:49:03Z

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.

Launch of Code Signing Redesign

2011-06-16T00:34:34Z

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.

Launch Of Always-On SSL and Firesheep Attacks Page

2011-06-10T23:43:00Z

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.

Redesign Simplifies Options For Getting Trust Seal

2011-06-03T21:52:43Z

Overview:
The VeriSign Seal is an important offering for the company as well as a symbol of trust for many online. As we started to offer more ways customers could get the seal, it introduced some confusion. Customers can either buy the seal by itself or buy an SSL Certificate which includes the seal.

Problem:
The VeriSign Seal page has two main goals - one, to help customers understand the two options for getting the seal and what the differences are; and two, to help them install the seal. The modifications we made the the existing page did not seem to be addressing this clearly enough. The first call to action on the page was to install the seal which seemed to suggest you could simply install the seal without purchasing it. And, the second call to action was to buy SSL Certificates which seemed to be divergent from the subject of the page as it didn't provide enough context as to why it located there.

Solution:
As a result, this section of the page was redesigned to clearly address the goals of the page and needs of users. Following the concept of a new versus returning user, we split out the content between new customers looking to buy a seal versus existing customers who had already bought a seal and simply needed to install it. This transactional box provides the two options for buying a trust seal and an explanation of the main differences between the options. The content is positioned as answers to questions "Need a VeriSign Seal?" and "Ready to Install Your Seal?". The seal installation language and label on the call to action button were simplified to more user-friendly language. Instead of things like 'create script' and 'get the seal installation script', we've opted for "Ready to Install Your Seal?" and "Install Seal".

The column headers of the table which provide a deep dive of the options for buying a seal, now provide more context. Instead of jumping directly into SSL Certificates, it now provides information as to how buying an SSL Certificate helps you get a Trust Seal - i.e. "VeriSign SSL Certificate Includes VeriSign Trust Seal" and instead of just "VeriSign Trust Seal", it now reads "VeriSign Trust Seal Only" making clear that this option gets you the Seal only and no SSL encryption.

See the changes: VeriSign Seal!

New Video Banner Interactivity Debuts On GeoTrust Website

2011-05-24T23:26:05Z

About a week ago, we added new interactivity to the third banner on the GeoTrust homepage. Upon clicking on the projector graphic, visitors are presented with a modal overlay featuring an embedded video on how more Alexa top 1 million domains are using GeoTrust. It's an infotaining and engaging video. Enjoy!

Study: Users Choose Convenience Over Clicks

2011-05-19T23:03:06Z

Balancing between providing too much and too little information upfront, can seem like a bit of a high-wire act at times. Do you link to another page for more information or provide it by default at the risk of overwhelming users?

To inform our decision-making process in an instance where we encountered this, we conducted an A/B test to assess users' behaviors real-time. We had heard from our users that they wanted system information but were unsure how best to provide it. So, we tested two versions of the same page - one page had the system requirements information appear by default on the page (Experience A) and the other page had a hyperlink to a page with the system requirements (Experience B). In both experiences, this information was positioned in the same spot where it was contextually relevant to the 'buy' call to action. The system requirements is helpful information for users to successfully complete their purchases.

Fifty percent of the traffic to this page were served up Experience A and the other fifty percent saw Experience B. Once statistical significance on the test sample size was achieved, the results proved instructive and actionable. It showed that users preferred having the system requirements information appear by default versus clicking a link to navigate to a page with that information. The conversion rate was higher on the experience with the information displayed by default proving that convenience and ease of access was what users wanted.