Tag Archives: environment

The Evolution Of User Experience Design

(This is a sponsored post.) We’re fortunate enough to be working at an incredibly exciting time in our industry. Yes, the challenges are considerable, but the opportunities are – equally – transformational. It’s never been a more exciting time to work as a User Experience (UX) designer.
Great designers deliver wonderful, considered and memorable experiences. Doing that isn’t easy and – through this series of articles – I’ll provide a wealth of pointers to ensure you’re on the right track.

Read this article:  

The Evolution Of User Experience Design

What You Need to Know About Visual Perception and Website Design

visual perception

There’s no lack of data to suggest how visual-oriented we are as humans. For instance, “90 percent of information transmitted to the brain is visual, and visuals are processed 60,000x faster in the brain than text.” Or this:  “65 percent of people are visual learners, and one of the best ways to drive messages home is through visual content.” This data helps explain why visual marketing has really exploded recently, and visual-centric content such as infographics are so popular. Seeing is one of our primary senses by which we intake information and understand the world. Basically, it’s a big deal….

The post What You Need to Know About Visual Perception and Website Design appeared first on The Daily Egg.

Continue reading: 

What You Need to Know About Visual Perception and Website Design

Web Development Reading List #166: Efficient Docker, CSP Learnings, And JavaScript’s Global Object

What fuels your work? What fuels your mind? What do you do on a non-productive day or when you’re sad? Nowadays, I try to embrace these times. I try to relax and not be angry at myself for not being productive.
And the fun fact about it? Well, most of the times when I could convince my mind that not being productive is nothing to feel bad about, things take a sudden turn: I get my ideas back, my productivity rises and, in effect, I even achieve more work than on an average day.

Link to original: 

Web Development Reading List #166: Efficient Docker, CSP Learnings, And JavaScript’s Global Object

Web Development Reading List #162: Server Side React, Inclusive Design And The Web Worldwide

We shouldn’t let ourselves get distracted by people who work on different projects than we do. If a developer advocate works on a web-based QR code application, for example, their way of tackling things most certainly won’t fit your project. If someone builds a real-time dashboard, their concept won’t relate to the company portfolio website you’re building. Bear in mind that you need to find the best concept, the best technologies, the best solution for your specific project.

View post:  

Web Development Reading List #162: Server Side React, Inclusive Design And The Web Worldwide

Web Development Reading List #138: Accessible Web Components And CSS And Sass Precision

From time to time you need to recalibrate your brain by experimenting with new technologies, by tracing down the performance of a certain feature or by reconsidering the environment of your project. While I’m generally not a proponent of inlined CSS, we now will use it for a third-party script we are providing to avoid style leakages. The point here is that this decision won’t harm performance as it’s an asynchronously loaded script.

Read original article – 

Web Development Reading List #138: Accessible Web Components And CSS And Sass Precision

Website Review: charmingcharlie.com

VWO recently conducted a giveaway along with Concept Feedback where we promised a free website evaluation by a Concept Feedback expert. Charmingcharlie.com won this contest and Concept Feedback expert Tom Charde along with the team has been working hard to churn out a brilliant review for this website. Read on for a review of CharmingCharlie.com, head to tail.

Analysis Environment

Note that the following analysis was done viewing the site on;

Web – MacBook Pro 15” Retina display (2880 x 1800) | OS X (10.10.3) | Firefox (38.0.1) browser

Mobile – iPhone 5S | iOS (8.3) | Safari browser.


First Impressions

After a quick walkthrough of the website, a couple things are very clear: it has a very clean design, is aesthetically appealing, has an audience-appropriate tone, and provides an impressive product offering. Charming Charlie steers clear of excessively large images and in-your-face promotional messages, which, in itself, is a big win for the user experience.

Brand Messaging

The first big hurdle that we noticed upon visiting the site is that it lacks any kind of site description, positioning statement, brand promise and/or value proposition. Your existing customers may know all about you, but there’s a large, untapped audience you’re overlooking: people who are unfamiliar with your brand.

Here’s a few basic questions one should ask themselves:

  1. How would you describe the company to someone who’s never heard of it?
  2. How does it provide value to its customers?
  3. What differentiates it from the rest of the market?

Here’s what we can make out from a simple research of the brand; Charming Charlie is a retail store (online and offline) with the latest trends in women’s apparel, fashion jewellery, shoes, handbags, accessories and more. This should ideally be mentioned  on the home page and done so in text format.

There are several great copy points on the ‘About’ page that could ideally craft the messaging and help establish a unique tone for Charming Charlie.

  • We’re crazy for color.
  • We live for sparkle.
  • We thrive on making a statement.
  • We know accessories have the power to transform both your outfit and your outlook.
  • Helping every woman, everywhere, find her fabulous.
  • If it feels good, do it. If it looks good, do it in every color.
  • Unleash your one-of-a-kind style.
  • Bring out your most fabulous, fierce and fun self.

Value Proposition

Charming Charlie needs a one-line “hook” statement; something succinct and hard-hitting that can be used as a tagline near the logo and possibly in the header area. The fifth bullet above (Helping every woman, everywhere, find her fabulous) is close, but it’s a bit too long. Consider this;

Charming Charlie
find your fabulous!

Refining the messaging will not only strengthen the brand, but will also boost the search engine rankings for relevant keywords.


Website Analysis

Moving forth we will break our analysis down to 3 categories; Technical analysis, Heuristic analysis and Mobile website analysis.

Technical Analysis

(Desktop)

The first and foremost thing that one should focus on is to ensure a glitch free website experience. Fixing minor bugs is low-hanging fruit, one that you can make a lot of money on. We found some of these conversion killing bugs on Charming Charlie;

GLOBAL-1 Upon arriving, the site immediately forces an intrusive promotional pop-up on the user. We’d recommend running a few tests on this (one without any pop-ups; one with a 15-sec delay; etc) to see if the bounce rate improves.

GLOBAL-1

The top promo banner in the header (scarves) is loading an error message.

GLOBAL-1

The “Quick Views” feature on the “As Seen In” page doesn’t seem to be working; it displays an endless loading spinner.

Many of the text-based graphics throughout the site aren’t retina-ready. (Examples: Charming Charlie logo, media logos in footer, free shipping banner.) Most users won’t experience a difference, but those with retina displays are seeing a pronounced drop in graphic quality.

(Mobile)

The email sign-up page (under “Customer Service”) gives an “invalid certificate” error. Testing this on Mercury Browser also showed similar results.

MOBILE-3 (1)


Heuristic Analysis

Homepage

CharmingCharlie.com’s clean, minimalistic design is one of its major strengths. It sets the tone right away. The homepage’s look and feel is right on target. Design-wise, one thing we’d suggest is tweaking the styling (inconsistent text colors and alignment) and placement (perhaps move to hero image area?) of the promo banners, which seem to jumble up the header space. The area of the homepage with the most room for improvement is the content.

  1. Allocation of page real estate: The current viewport is dominated by a giant slider; an area that can be used much more efficiently. Try reducing the height of the slider images, moving some of the featured products and messages up, and testing for engagement.
  2. Complete absence of copy: There is literally zero copy as HTML text; the entire page is image-based. In addition to accessibility issues and increased page load time, lacking text on the homepage is killing the chances of achieving a decent search engine ranking.
  3. Lack of Clarity around Newsletter sign up form: There is a “Sign up for emails” form in the footer, but there’s no information about what this is for. Think about it from a user’s perspective: “Why should I sign up? What are you going to send me in exchange for giving my personal contact information?” Try adding a brief description near the form or a link which describes what a user can look forward to.

Following is a screenshot of homepage, annotated with things that should be worked upon.

Modified Home Page copy

We’ve also made a quick mockup for one possible way the header might be transformed.

Variation

VWO_proposed-header_TC edits

vs

Control

Home header

Category Browsing

The What’s New category is confusing.

  • It has a combination of “themed” content (Modern Americana, Citrus Splash, Moroccan Muse).
  • A redirect to an existing main category (CC Essentials).
  • An out-of-place sub-category (Best Sellers).

There’s really only one true subcategory that fits here: New Arrivals. To remedy this, simply eliminate the What’s New category entirely by ‘New Arrivals’. Following is a screenshot of the category browsing drop down of Charming Charlie and things that should be worked upon.

Category browsing-1

GLOBAL-1

Also consider sorting the resulting list of categories into two grouped areas: those which are a product type (Jewellery, Handbags, Apparel, Accessories) and then all the others (New Arrivals, Best Sellers, Seasonal, Special Occasion, CC Essentials, Sale). And it may help to separate the two groups in the side nav with a faint line. Check the mockup with these suggestions implemented.

Product Page

The product page looks pretty standard but there are multiple tweaks which can be done to make them convert more. The screenshot below annotates some aspects which can be improved.

Product Page (1)

One other glaring aspect which we noticed was that there is no product review system. It often acts as a social proof and really helps the visitor take a decision on the product page.


Mobile Web

With e-commerce buyers rapidly gravitating towards mobile, fully functional mobile site is a must. CharmingCharlie.com isn’t a true responsive site, but it does have a fairly decent mobile
version.

Home Page

Similar to the desktop site, the mobile version of the homepage suffers from a serious page real estate concern: the promo messages, navigation, utilities, etc take up almost 60% of the initial screen. Reducing the size of this footprint and moving the meat of the content up will almost certainly improve bounce rate and conversions.

MOBILE-1

Store Locator – Visual Hierarchy Issues

With two form fields (styled differently for some reason) interspersed among three large, black buttons — the eye just doesn’t know where to go on this page.

Converting the buttons to links, and adding some space between the main content and the footer (email signup form) should help create a better flow.

MOBILE-2

Product Page Readability

We would recommend increasing the font size of the product page body copy. The size used on the About, Privacy, and other non-product pages is much easier to read — as can be seen below in a side-by-side comparison.

MOBILE-4

This brings us to the end of the website review of Charmingcharlie.com. We definitely hope Charming Charlie would implement these changes and share the results with us. We thank Tom Charde for working rigorously on this review and helping us in bringing this review to such good shape.

We are going to conduct another giveaway very soon; Can’t wait for the giveaway? You can head to Concept Feedback and hire expert services to get your website reviewed in detail.

Cheers!

The post Website Review: charmingcharlie.com appeared first on VWO Blog.

See the article here:  

Website Review: charmingcharlie.com

The Line Of Least Resistance

In chess, the psychological dimension that springs from a dialogue between two brains, two ideas, two strategic conceptions that depend on the personality of each chess player has long been somewhat of a romantic mystery. How do Grandmasters think? What strategies do they use?
More often than not, the most successful strategies are rooted in our very own nature. And common to most Grandmasters is that they almost never take the easy way out.

Taken from: 

The Line Of Least Resistance

Incorporating More Quiet Into The UX Design Process

Behind every successful design is a dynamic creative team, and it takes all kinds of personalities and skills to get the job done. However, the culture and expectations of a design agency are often largely centered on one outspoken, gregarious personality. Things such as group brainstorming, on-the-fly presentations and open workspaces have become the norm in most design agencies.
But the stereotypical extrovert is just one of the personalities that make up a successful team.

This article: 

Incorporating More Quiet Into The UX Design Process

WordPress Multisite: Practical Functions And Methods

Multisite is a powerful new feature that arrived with the release of WordPress 3.0. It allows website managers to host multiple independent websites with a single installation of WordPress. Although each “website” in a network is independent, there are many ways to share settings, code and content throughout the entire network.
Since the beginning of the year, I’ve been developing themes and plugins for a WordPress Multisite-powered content network. During that time I’ve learned many powerful tips and tricks unique to Multisite.

Link:

WordPress Multisite: Practical Functions And Methods

Getting Started With PHP Templating

In this article, we’ll cover how to separate the view of your PHP application from its other components. We’ll look at why using such an architecture is useful and what tools we can use to accomplish this. Here’s what we’ll cover:
Learn some basic MVC concepts, Review some popular templating libraries, Play around with a small custom-made view class. Explore the basics of using the Twig library. To fully benefit from this article, you should already know how to write and run your own PHP scripts on a Web server (i.

Continue reading – 

Getting Started With PHP Templating