Latest blogs

Chances are, you’ve heard about the myriad ways in which the agile development method is changing the face of software development. If you’ve worked in the design world, you may even have given agile a try yourself, or at least found yourself the victim of an overeager manager who wanted to “shake things up” and “think outside the Waterfall box.” The agile method is, indeed, an effective and schema-breaking approach, one that’s far more relevant in today’s cash-strapped, fast-paced work environment than more traditional, slow-moving, risk averse, top down production strategies, which often fall behind the market. But, while related, software development isn’t web design, and the agile method isn’t necessarily a solid template that should be applied to the design process. Instead, it’s better to take the wider agile philosophy to heart and apply the method’s core principles strategically. Let’s take a look at just what agile is, why it might be good for designers, and how to adapt it accordingly.

What is Agile?

Agile is a reactive rather than predictive development method. The manifesto states four main values: 1. Individuals and interactions over processes and tools: While the agile method does employ various techniques, e.g. scrums, processes and tools are a means for creating more frequent interaction between team members and customers, not an end in themselves. 2. Working software over comprehensive documentation: While agile does require someplanning, there is more of a “dive in and get it done” mentality in order to ship a Minimum Viable Product(MVP). This reduces the amount of documentation from planning to post-ship analysis. 3. Customer collaboration over contract negotiation: With agile, the goal is to get things done quickly. For that, customers need to be on board and in frequent communication with the development team, not negotiating terms. 4. Responding to change over following a plan: There are few “straight paths” in agile. Work occurs in a series of iterations so that the team, clients, and beta users can test various elements of the MVP as it’s developed, and change course if necessary.

Why Agile is Good for Designers

While at first it may feel weird and even upsetting for designers to nix the upfront, static PSD, the agile method can really big a boon for the creative process. On the simplest level, it can get designers out of that pixel-level perfectionism that can delay delivery of projects for months, bring projects in over budget, and even impede the original brainstorming process. The agile method also allows designers to gain a continuous look at just how users interact with designs. This may lead to more low-level frustrations when, say, a whole day’s work needs to be re-envisioned, but it also prevents even bigger redesigns down the line when a client doesn’t like a finished product that may have taken months to develop. In the right situations, where communication is productive, agile can even lead to more creativity as both the designer and the client discover the true heart of the project as they go. Lastly, agile design will help designer work seamlessly with developers also using the method, promoting collaboration rather than silo-induced isolation. Let’s take a look at a few agile techniques and see how they apply to the design world.

Technique 1: Frequent Iterations

While still essential, the information gathering, site mapping, wireframing phase in agile design should be seriously reduced, as should, really, every other phase of the design process. Instead, the design team should set goals for an MVP right up front, and then work toward achieving that MVP via a series of 1 to 2 week iterations. This means breaking tasks up into a series of smaller deliverables and tasks, placed into the categories of backlog, in-process, in review, and in production, so that the both team members and the client can constantly re-evaluate and re-prioritize. It also may be helpful for designers to focus on developing personas that can inform the ad hoc design experience. In order to really embrace this new process, it’s important to adopt the attitude of welcoming changed requirements, and being ready to set new goals, as long as they bring you closer to your MVP. You’ll also likely to do better if you forget static PSD mockups in lieu of sketches and easily changeable mockups. Overall, it’s best to start working with products from day one, something web designers will be better able to do if they work in browser.

Technique 2: Continuous Integration

One of the biggest pitfalls of the waterfall method is that a team could very well reach the end of a development cycle only to find that many moving parts don’t fit together. This can still be a problem even with agile’s many iterations, as there’s no top level plan to tie it all together. In fact, the more frequent a team’s iterations, the more important it is to do continuous integration. In the development world, this means integrating, running and testing code once a day, to make sure everything is aligning. Continuous integration is obviously important to do both on the design team itself, but it’s also a chance for designers who may be developing a greater sense of a project’s overall direction to guide the project’s holistic vision.

Technique 3: Constant Interaction with Clients

Agile design, just like the agile method at large, really can’t work without constant interaction with clients. Yes, I know, this might seem nightmarish to consider outside of any but those dream clients, who come equipped with a clear vision of what they want. But in many ways, agile is much more appropriate for the average or even difficult client, who can’t make a decision. With agile design, you’re bringing the client onto the team to test and re-prioritize right along with you, allowing designers to gain a much better sense of just what clients are looking for through interaction than the clients may even have themselves. However, it’s important that someone on the team act as the point of contact, so that designers can focus on their work. What’s more, there should still be clear leadership from the design team so the customer doesn’t yo-yo too much, or else the final product will be disjointed.

Takeaway

Despite its many strengths, the traditional waterfall method just won’t work in today’s market, and it has the added detriment of playing into designer perfectionist tendencies. If the highest principle in the agile method is to “ship all the time,” why wouldn’t agile design benefit both customers and designers alike? Communicate well, build well, ship well, and take your design up to the next level. This article is from: webdesignledger.com  

Applying Agile Principles to Design

0 Loves

Nimli Checkout Page
A good checkout process allows customers to quickly and easily make their purchases online without feeling overwhelmed or confused. However, it’s not uncommon for online retailers to face shopping cart abandonment rates of well over 50%. Implementing a single-page checkout is a natural first step for retailers looking to reduce their abandonment rate, but there are other factors that drive customers away from the checkout process. If you’d like to increase your conversion rate by ensuring that your checkout process is user-friendly, here are three areas to re–examine:

Quick and easy access to customer service and shipping info

Easy access to customer service and shipping information is an often overlooked feature of checkout pages. A new customer or someone not familiar with your brand will not necessarily know your shipping, returns, and various customer service policies. Once she’s hit the “checkout” button, a number of questions might arise. How long will shipping take? Can I return these pants if they don’t fit? Do I have to pay for return shipping or will a free label be included in my order? You might think that you’ve covered all of these questions with a comprehensive Customer Services FAQs document on your site. However, if the information isn’t clearly presented at the time of checkout, your customer may leave the page to look for answers to her questions, or she might abandon the site entirely.

Shipping Information

A prime example can be found in the checkout page of
Nimli, a boutique clothing site. Shoppers are provided no indication of the following: what the shipping cost might be; if return shipping is free or something the customer pays for; or how long the customer has to make a return. In fact, there’s no visible link to shipping information at all.
Nimli Checkout Page The first page of Nimli’s checkout process doesn’t offer answers to customer service and shipping questions.
If I’m getting ready to check out from Nimli, I might think there’s a chance that this information is on the next page, so I click the checkout button and continue. But there’s nothing on the next page about shipping or customer service either, just a prompt to create an account or sign in. By the third page, there is still no sign of any kind of customer service information. Instead, I’m looking at a billing form that needs to be filled out.
Nimli Checkout Page The third page of Nimli’s checkout still lacks answers to common shipping questions.

Answer Shoppers’ Questions

Let’s take a look at the checkout process of Bluefly. There’s a lot going on within their initial shopping cart page; some of the information is even a little distracting. But the key element is a box they include in the right column. It contains all the customer service and shipping information they think a shopper might need.
Bluefly Checkout Page The Bluefly checkout maintains a box of links to useful customer service information throughout the entire process.
When I move on to the next page in the checkout process, all of the distracting information is removed. Still present are links to customer service information and ordering FAQs. There’s also a running calculation of what my order will cost with shipping and taxes added in. When I click the link to FAQs to look for return information, rather than taking me to a new returns page, a popup window opens, giving me quick access to information without forcing me to leave the checkout page.

See Where Your Customers Leave

How do you know if your customers are leaving their checkout in search of shipping or customer service information? Take a look at a clickstream in your analytics program. Start on your shopping cart’s initial checkout page and then look at where your customers go next. Follow the clickstream all the way through your checkout process and note which other non-checkout pages are pulling people away. You may see people going back to product pages to continue to shop or clicking on your homepage to look for more, but if your shipping, returns, or FAQs pages are getting a lot of traffic, it could be a sign that the information your customers are looking for isn’t readily accessible from the checkout pages. The bottom line: Include easy access to your shipping, returns, and customer service information on every page of your checkout.

Coupon codes

Coupon codes or promo codes frequently hinder the checkout flow. With the rise of coupon code aggregators, there’s no shortage of places to turn when looking for discounts. However, just because customers often leave your site in search of deals does not mean coupon codes have to be the bump in your checkout process. First, if you don’t currently offer coupons, take the discount field off your checkout pages. It can always be added back in later. For those retailers who do use coupon codes, there are two main opinions about where to place the coupon input field. Some retailers present the coupon field at the beginning of the checkout process so that customers can see right away if their code is valid and what their order total comes to. Others move the coupon input field to the end of the checkout process, making it the last field before the customer finalizes the order. Neither solution is foolproof. Retailers who prominently display a coupon field on the first page of their checkout run the risk of losing customers who leave the site in search of a discount.
Lord and Taylor Checkout page Lord and Taylor displays their coupon redemption field on the first page of their checkout.
On the flip side, retailers who move the coupon field to the end of the checkout procedure may make customers searching for the redemption field unnecessarily nervous. The shopping cart abandonment rate might also be artificially high in the final stage of the checkout flow as more customers who aren’t quite ready to complete a purchase but want to check the validity of their coupon work through the checkout stages just to find the discount field.
Nordstrom Checkout page The first page of the Nordstrom checkout shows no indication of where in the process you’ll be able to enter your coupon code.
If you do experience a large number of people abandoning the checkout process to look for your coupons on other sites, you might consider a feature used by Sephora: next to your coupon field, include a link to a popup or overlay window where you list your current codes and special offers. The bottom line: Keep customers on your site by telling them where the coupon redemption will be and linking them to your own page of coupon codes that they may be eligible to use.

Shipping and billing information

In the typical checkout process, much of the time is spent entering the billing, shipping, and payment information. The longer it takes the customer to check out, or the more confusing the process becomes, the less likely she is to complete the checkout. There are a number of places within the shipping and billing sections where a customer might get stalled depending on the layout of your forms.

Filing Out Your Address. Twice.

Not everyone will have the same bill-to and ship-to address, but those who do certainly don’t want to type in their information twice. Don’t assume your customers will use a form field auto-fill. Require that a customer enters her billing information first, and then give her the option to check a box if the information is the same for her shipping address. If it is, let your platform duplicate the information for her. If she’s checking out as a registered user, make sure your platform is saving her billing and shipping info within her account. Next time she purchases from you, she’ll need to do even less.

Taxes

Not all States have a sales tax, so if you are charging sales taxes on an order, be sure your customer knows that before he reaches the last page of the checkout. A shipping and tax estimator (based on zip code) is an easy way to provide shoppers a heads up.
TigerDirect Tax Calculation The first page of the checkout form from TigerDirect offers a tax estimator based on zip code and clearly defines who will be charged tax.

Domestic and International Orders

If you don’t do a lot of international orders, you probably don’t spend much time thinking about how your foreign customers are interacting with your checkout process. But consider this: missing or confusing elements might be keeping your store from getting more international orders. No matter what country your business is based in, if you do accept orders from foreign customers, make that clear. Define which countries you ship to, what currencies are accepted, and how taxes and duties are handled.
International Options from Delight.com Delight.com offers a message to international customers about where they need to go to complete their shipping and billing form.
Remember the customer service links that appear throughout the checkout process in the Bluefly example above? A great way to answer these questions would be through a link or links during the checkout process like “International Orders” or “Shipping to Other Countries.” Keep the address entry fields in an order that makes sense for that country. For example, if the order of entry fields on an address form was Street Address, Zip Code, State, City, Country, many Americans might mistakenly start typing their city into the zip code box before realizing that the fields were not in the order of a typical United States address.
Ben Sherman Shipping Form This shipping form from Ben Sherman is targeted at UK shoppers; an American would find the ordering of the address fields inconsistent with US conventions.
Maybe you’ve perfected your domestic checkout and your international checkout. You’re able to take orders from foreign customers and ship items internationally, and things seem to be going smoothly. But have you considered the people with a domestic billing address and foreign shipping address, or vice versa?  Some ecommerce platforms don’t have a built-in capability for handling customers who need to direct their billing to one country and their shipping to another. If you’re wondering whether you’re losing customers in the checkout process due to the organization of your billing and shipping forms, use your analytics tool to install event tags on the form fields to see where people are stopping or having problems filling out their information. The bottom line: Don’t force your shoppers to spend more time than necessary filling out forms, and make sure you’ve addressed their billing and shipping questions.

Ch–check check it out

When a shopping cart checkout is well-designed, customers almost never notice. They’ll breeze through the process and quickly complete their order with few hangups or questions. The best way to determine the health of your site’s checkout is by examining your analytics and turning to user feedback. You might get started by creating conversion funnels and clickstreams within your analytics package. You can also use programs like ClickTale or Userfly (read our review) that record session videos or screen captures to see exactly where people are making errors or getting confused when they try to checkout. If you want verbal feedback from users as well, order user sessions from UserTesting (read our review) and request that the participants go through the checkout process while describing what they find straightforward and what they find confusing. In the end, you’ll discover what is working and what might be keeping customers from completing their orders. After all, there’s always room to improve your site’s conversion rate.
from: uxbooth.com

Stopping Shopping Cart Abandonment

0 Loves

The button and the link have co-existed together for a long time. The link vs. button debate is not really a battle of which affordance is better, but instead a question of when to use one over the other.

When we look at the web, links outnumber buttons on most websites.  The reason for this is because
  • links are easier to create
  • links are simple and sufficient
  • links don’t overshadow content
Buttons, however, are the opposite.
  • buttons take more time and effort to create
  • buttons can come in different sizes, colors and styles
  • buttons can sometimes overshadow content
The differences of the button are, in fact, its strengths. You can style a button to look three-dimensional so that it exhibits the physical characteristics of a real button, and therefore, afford the act of pressing. A button can also be sized and colored in a way that uniquely stands out on its own. This makes it more noticeable and easier to click on than a link. When isolated on its own, a button may also intrigue the user’s curiosity, which could lead to more clicks than a link. A button is a much more potent affordance than a link, which means it should be used sparingly. Overusing buttons will put your click-rate at risk, which is why you should check which call-to-actions are the most important that deserve a button for. Actions like signing up, joining, subscribing, buying, registering, submitting, saving and searching are important because they enable the user’s commitment to the website. In order to make your buttons strong, you also have to consider the placement of the button. If you place a button in an area with a lot of surrounding objects it could degrade the potency of your button. Ideally, you want to place your button alone with as few amount of objects as possible, so that more attention is drawn to it. The color of a button is important as well. If a page has more than one button, then you should make the most important button a different color than the others. When they are all the same color then they all have equal weight. But when only one button has a different color, that button has more visual weight than the other buttons. There’s always a call-to-action that deserves more clicking than the rest. By using buttons the correct way, you can better influence users to click on what you want them to click on.  The question you should ask yourselves when designing is not when to use the link, but when to use the button. from: uxmovement.com

The Button vs. Link Debate

0 Loves

Organization is a beautiful thing, especially when you make it work to your advantage. There are a lot of websites out there that offer great content. The only problem is that most are not organized in a way that shows off their great content. Most sites organize their page content by how their content is categorized. However, if you want users to get the most out of your content you have to organize it in a way that goes beyond that. People want the best of what you have to offer, but they won’t be able to find that if you don’t make it easy for them. That’s why you need to create a top content category, so users can find your best content. Here are a few ways you can show off your content to make it more attractive and enticing: 1) Show off what’s MOST RECENT and NEW – People’s interest in what’s new will never get old. Make it clear what’s most recent and people will gravitate to that. It’s just the nature of human curiosity. 2) Show off what’s HOT and POPULAR – People like what other people like. Sometimes it’s because other people like it, but sometimes it’s because what most people generally like is genuinely good. You should always show what’s hot and popular by keeping tabs on what content people are viewing and consuming the most. You can even go beyond that and show how many people viewed or purchased a certain item. 3) Show what’s FREE! – This one should be pretty obvious. Labeling things FREE attracts so much attention. But just make sure that your free stuff is in a place that’s easy to see . 4) Show any SPECIAL or LIMITED TIME OFFERS you have – People like discounts and deals. This may not be as good as free, but it still attracts attention. Anytime you label something as transient it creates a sense of urgency that makes people jump on what you offer as quick as they can. 5) Show off what’s RECOMMENDED by you or others – As the gatekeepers of your site, you have knowledge and insight to your own content that users don’t have. Therefore, what you choose and recommend to others would be of value. You can also allow your own users recommend content to other users. This could mean showing content people are sharing the most or being rated the highest. Everybody wants their hands on what’s hot and what’s best, and on the web they want it quick and fast. If you have particular content that’s getting a lot of praise and attention don’t be afraid to spotlight it. You should promote it in a visible area on the home page where users can get access to it easily. By organizing your content in a way that shows users where the good stuff is you are luring them in for engagement. from: uxmovement.com

5 Ways to Show Off Your Content

0 Loves