Usability Review: OldNavy.com
There are only a few examples of top-notch ecommerce websites, but Old Navy.com hits the nail on the head. Here are a few of the key elements that separate them from the rest of the pack.
Cross-Site Header Bar
It is clear that OldNavy is only one of 4 websites operated by The Gap. They promote cross selling between the sites by offering a simple centralized checkout for all 4 stores.
I really dig the reversed tab effect which shows which site you are currently on. Each of the 4 sites has its own background which makes it easily distinguishable.
How To Use Status to Style a List
As computer programmers we often get stuck thinking in binary. Things are either true or false, black or white, on or off, good or bad, pass or fail. Although computers think this way, the people who use the software typically do not. We can use our skills as human beings to create a better user experience for our customers.
Why we need another CMS
Every design agency needs a content management system. They are a solid business need. But, does every agency really need a custom solution? Especially when it comes to small business, the CMS is causing more problems than it’s solving.
Can a Great Product Trump Bad Customer Service?
I will be the first to admit that I am an Apple addict. It is probably an unhealthy obsession at some times, just ask my wife. In other words, I am a typical Apple customer. I own more Apple gear than most high schools (but less than Al Gore). My MacPro, MacBook Pro and iPhone make me especially happy and productive.
However, I cannot quite understand how a company like Apple, who can successfully focus so much time and energy on the User Experience, can fail so miserably at servicing their customers.
Blurry, Colorblind and Brilliant
“Design is in the details.” - We hear it every day and it is absolutely true. However, details without a blueprint to tie things together can lead to problems. We are passionate about details, perfect grid alignment, perfect color combinations, gradients, reflections and textures. These visual details have a major aesthetic impact on the website, but they can’t replace the content – The reason the website exists in the first place.
Why We Are Not Hiring
Designing Interactive has grown up a lot over the last 6 years. It has grown from a small freelancing company into a web application development house. We have done a good job of keeping ourselves busy with paid work throughout the years, but this past year was particularly successful.
However, our profitability has started to plateau this year and we need to make some changes to continue growth.
Sharing the Grid
When it comes to design, I’m a firm believer in simplicity. Occasionally I’m criticized for being overly simple, but I take that as a compliment. In my design, typography, grids, color, imagery and especially whitespace all stand for themselves. They don’t need any fancy treatment or “web 2.0″ effects. They work because they are simple and beautiful in their natural state.
Grids are foundational to all my designs. I always sketch out ideas on a Behance Dot-Grid Book, (thanks to Garrett Dimon for sharing this a few months ago). While these square grids are perfect for sketching idea’s and concepts, they don’t work for fine-tuning your design.
Fixing Disappearing Cursors in Firefox
The past few days I have been debugging the User Interface for Simpli5. Today I wrestled with a particularly frustrating issue in which cursors were completely vanishing from inputs in Firefox. While it did not affect the interaction of the input, I could still manipulate the text, it did cause quite an annoyance.
Here is a quick example which demonstrates the problem:
The problem is caused by the change in Firefox’s current rending frame. Setting overflow:scroll on our #Container div causes Firefox to use that div as it’s current rending frame. Thus, the cursor is being rendered on the #Container, not on the #Dialog div, which contains the input. Effectively, the input is covering its own cursor.
The fix is a simple change in CSS inheritance. Without setting an overflow setting on the #Dialog div, we are inheriting the overflow:scroll from #Container. By setting the #Dialog div’s overflow setting back to it’s default overflow:auto we are changing Firefox’s rendering frame to the #Dialog div, thus bringing back our cursor.
Here is the fixed example:
Thankfully, Mozilla has fixed this problem in Firefox 3.
Google Chart’s Resolution
A few days ago I posted my frustrations with Google’s charting API security. While I still believe there are some issues that would plague banks, government and other institutions that have highly sensitive data, I have found a solution to our problem.
Search
Popular Posts
- 50 Tips To A User Friendly Website
- My Favorite Pomodoro Timers
- How to build a Gantt Chart with the Google Charts API
- Why Flash is Mostly Bad
- Sharing the Grid
- 10 Tips to Better Google Wave Conversations
- The difference between User Research and Usability Testing?
- How to Label Submit Buttons
- Our New Development Process
- Paper Prototyping vs. Balsamiq Mockups
Latest Comments
- Nate Klaiber → “ The design industry is plagued with the misconception that product manuals are evil. These designers believe that your product should be intuitive enough to use without a manual. While there is a certain truth to this, there are many viable reasons for product manuals to be used. There needs to be a certain…”
- Joe Fiorini → “ The design industry is plagued with the misconception that product manuals are evil. These designers believe that your product should be intuitive enough to use without a manual. While there is a certain truth to this, there are many viable reasons for product manuals to be used. There needs to be a certain…”
- Roger F Carver → “ The Google Charts API is an excellent way to add high quality charting to your web application. We first started working with the API as part of the Simpli5 dashboard development, and were quite impressed with its functionality and ease of use. Wrapper classes were developed and added to our Sandstone Application Framework to make…”
- Nate Klaiber → “ The “I agree” checkbox has become an interface standard on registration forms. “I agree to the terms and conditions.” While it’s purpose is generally understood by the consumer, it is a key source of frustration for people registering for accounts. eBay's Registration, as an example Why it’s overlooked: Checkboxes are small, particularly ones which aren’t grouped…”
- Josh Walsh → “ Most of the value you gain from a usability testing session comes from the analysis after the session is complete. I have been involved in a few sessions recently where no formal analysis has been conducted. I believe this is a mistake. Traditionally, the analysis portion of a usability session takes quite a long…”