UXD for non-techies
Problem: it’s pretty annoying when a user isn't familiar with blue bottom border (links), inner shadowed box (input element) which looks like a button to them, and when they try to click it the cursor changes to ‘|’ inside the box, perhaps this is the most annoying problem for UX designers. Let’s take some design inspiration from Craigslist:
Craigslist is one of the largest viewed websites(8 billion views a month), it is strongly based on user’s needs, thinking about a user who is not much into computers i can see a lot of feedback on elements, contrast, and just enough elements that i would want to see in a an “online yellow page” based website. even if i don’t know what is link, it can be figured out once i am on the website. kudos to the designer!
Now let’s take another example in a B2B perspective, Bizongo is a B2B marketplace website, the transaction among them is a huge deal, contrasting details are necessary in terms of size, colors, quantity, brand, type etc. filter’s also varies on product, hence the design has to be dynamic in terms of filters.
It has a typical B2C eCommerce based design, similar with flipkart, amazon where filters are usually on the left which works out for them, since most of their user’s are familiar to see such elements, in a B2B website most users lack basic computer skills and not familiar with such web elements, a better design has to dive deep into how user’s will interact with such elements.
let’s redesign the above website for business people and make it a little less complicated.
Categories are one of the common element in all products, so adding a category automatically when a user searches makes sense, for example if a person searches for X product, category wise product could be sorted out for the same product, this design would help the user to find it’s product. UI must make sure that user’s think they are very close to the product page else it might end-up into a bounce result.
(click count : 1)
have changed few things, 1: added options on the top of the page (again, these element should be common to all, color and price (can be something else). 2: added a search bar for users to search filter list which is very long. why should a user go all the way from A to Z for a selecting a seller ? and 3:, adding up two simple things on the list : NAME And PRICE, user already knows the category thanks to the TOP section of the page.
(click count: 2 in best case scenario, and for worst case its: filter_selected+sorted_price+sorted_color+1)
Detail Page:
I tried eliminating some of the unnecessary stuffs, this is how it looks after it’s done, UI must make sure that users get what’s click able and what is not, it’s been generally seen that user’s like to know who they are having a transaction with before the adding a product, so i added the following on SOLD BY SECTION:
there‘s also a quick rating besides seller’s name for some sort of social proofing.
click count: best case : 1 (if user’s pin code is fetched automatically, default’s of select pack and quantity is as per user’s need)
else, 1 for pin code+select pack(2)+ quantity(2)+add to cart : 4 clicks
In Total
best case: 4 Click
normal case: 7 click
worst case: filter_selected+sorted_price+sorted_color+9
Summary :
Tried to sort out the entire B2B transaction process in terms of information architecture, added a card like structure rather than a big screen cart as seen in the current website and replaced it with a very simple visual hierarchy for the users. click count is decent enough for an eCommerce, it adds one layer of click from the current version but it solves the basic hierarchical problem for users, apart from this the design uses basic elements of the web (select, link, text input field).
