As I mentioned in my previous post, I am in the middle of a web site development project for a friend. My friends wants an online store site where she can sell her hand turned wooden bowls (think woodworking).
This has been a challenge for me since it is my first solo development project for someone other than myself (which is also pretty exciting!) In this project I have gone from “Ok, so you want a website?” to particular usability issues and getting the CSS right on the buttons. I’ve been using WordPress CMS, hosted on Bluehost. The WordPress theme I am using is called Mystile, which I have modified with a child-theme. I’ve also added several key plugins, including an SEO plugin (more on that in the previous post), and an online commerce theme called WooCommerce which has actually been quite useful.
Figure 1. Screenshot of the Art from Nature homepage on 11/12/13.
As can be seen in figure 1, there are still some aesthetic and usability issues that need to be addressed, not to mention the interactive issues that can’t be seen in a screenshot. The ones that bother me most right now are 1) the placement of the navigation/banner image, 2) the “Product Category” navigation interaction, and 3) this weird navigation box thing that pops up responsively when the browser window is very small.
The navigation, banner image and “Product Category” navigation are actually very related to each other. Although they are very different in how they are generated in PHP, they both deal with the issue of navigating the shopping experience. I’ve noticed as I try to browse categories, it’s pretty difficult to get from one category to the next because the top nav is just so high (you have to scroll down to see the products, and the top nav disappears out the top of the browser window) and the side “Product Category” navigation goes away when you navigate off the main page. I’ve been trying to make the “Product Category” nav stay there, but since it is actually a home page widget, that has been pretty difficult….
As for the weird navigation box thing, it’s just annoying. I’m going to work on it after I fix the first two problems. I also hope to do some a casual usability study or two in the near future as well.
And finally, below are the list of specs I developed for myself. They aren’t very official, but that is because nobody is using them but me. 🙂
- get around the problem of brown.css overwriting everything
- Long photo in header
- Nav and long photo must be usable
- Make it user friendly to change this photo
- Deal with strange nav thing that happens when width is small
- Welcome to site text + pictures
New items can be displayed
- Item navigation
- can put photos/text
- item navigation should stay when a category is clicked on
- Must sort into categories
Categories displayed on home page as nav
Categories must open as their own page
Must be able to mark price
- Must be able to mark as sold/unsold
Must sort according to sold/unsold (must still display if sold, but be marked as such)
- Must be manageable from back end
Must have individual item checked by dafault
- Must be able to tag items and have that reflected in html
- Post links must be <nofollow>
- Money must go to Terri
- Credit Card and Bank Transfer work <- next release
Buttons must be legible