UXD Jobs News & Events

Publish your UX related news & events. Mail to publish@uxdjobs.com.



Web Design Usability Tips For Billing Forms

Each ecommerce site has its own checkout flow moving the user from a shopping cart to the final purchase. This differs based on what the user is buying and their intentions, but finalizing payment is always the toughest part.

Your billing fields need to really keep visitors engaged and encourage them to complete the checkout process. I’d like to share some usability tips you can follow to improve your billing form designs and increase user checkout conversions.

Clarify Intent

Your goal is to design forms that encourage users to buy. So you want to make this process as simple as possible, especially at the billing phase where money is on the line.

There is no single way to clarify an entire billing form. You just need to keep each field clear and concise, never let the user feel confused or unsure of their decision to check out.

Here are some techniques you should keep in mind that work well:

  • Larger typography
  • Labels instead of placeholders(or both)
  • Extra padding between fields
  • Custom tabindex for easier navigation

Also add plenty of icons to demonstrate visuals where needed. The Threadless checkout page offers a great example.

The credit card icons make it crystal clear what the user is selecting as a payment method. The same goes for icons lower in the field which clarify the location of CVV numbers.

Do everything in your power to let the user know exactly what they’re doing at each stage of the billing form. There should be no ambiguous terms, no unclear directions, and plenty of tooltips/icons to answer any questions along the way.

Custom Input Spacing

Some data requires a certain text format like phone numbers and credit cards. This spacing can be dynamically generated on-the-fly using JavaScript and it’s one of the best techniques you can add to your website.

Custom spacing lets users know they’re on the right track when filling out form fields.

You can do this with zip codes where the form automatically tabs onto the next field once the user enters the proper digits for a zip code. Same with phone numbers where you can auto-style the digits to match a phone number. You can see this on eBay’s checkout form.

Checkout Form

But the most useful is the credit card 4-digit spacing format. Credit card numbers are long and they’re easy to screw up. An incorrect CC number also means the order will completely backfire.

This custom CC spacing in your billing field makes it that much easier for customers to enter their numbers and double-check that they’re correct. You can find a nice example on the BodyBuilding checkout screen which also includes error messages when you have an invalid entry.

Checkout Page

There are tons of free plugins you can use to create the auto-formatted text. Most run on jQuery but you can find some vanilla JS solutions too.

These are the best ones I’ve found:

Simplify The Action

Some checkout forms are longer than others so the process always feels different for every website. This can be confusing for many visitors and it’s one reason why ecommerce stalled for so long in the early 2000s.

But regardless of your form’s length there are two ways to design around this:

  • Smaller forms should try to keep everything on one page for simplicity
  • Larger billing forms should break into steps with breadcrumbs

For example, the smaller billing form on SEMrush is fantastic. Very quick to use, easy to read and everything you need to know is clearly visible on the page.

Checkout Billing

But I don’t mind a longer checkout process so long as it has breadcrumbs. These offer a clear indicator of how far the user has traveled into the checkout process and how much longer they have before completion.

This confidence makes it easier for someone to commit to the billing form at each step. If they have no idea when the checkout process ends they might get confused, anxious, or just annoyed and leave.

Breadcrumbs are huge and I absolutely recommend adding them to larger billing forms. The Wiggle checkout uses clear breadcrumbs at the top of each form page.

Checkout Billing

Smaller & larger billing forms can work well just varying different techniques. Be willing to try both!

Run some A/B split tests and see which style performs better. You might be surprised at the results.

Recap The Purchase

Once the user enters their billing information it can be tough to hit that final “submit” button. Hesitation is the death of conversion.

By recapping the purchase order you give customers a final peace of mind. They can see everything at once from the items they’re purchasing to the total fees(plus processing) and even the delivery date if applicable.

GitHub’s pro upgrade billing field recaps the purchase all on one page. It clarifies how often you’ll be billed, what the final fee is, and when you can expect the next fee. Most fields are filled out from your profile so if you have an account this process is very quick.

Checkout Signup

Another example is Amazon, the mother of all ecommerce shops.

Once you enter all your details like shipping address & payment info, one final screen recaps the whole order to make sure you really understand what you’re purchasing.

This reduces returns for wrong items and helps the customer feel confident when they press that “purchase” button.

Billing Page

Recapping the order can be tough on a smaller billing form. But just be openly transparent with your customers and share as much detail as possible.

Wrapping Up

Your site’s billing form is the only thing standing between a potential customer and a paying customer. That’s why form optimization is so important.

I hope these trends can help you craft usable and encouraging billing forms that’ll bring more revenue to your shop and all of your clients. Optimization is an ongoing process but if you’re constantly testing new ideas you’ll always be ahead of the competition.

Source: Design Modo

Author: Jake Rocheleau

Posted in Knowledge sharing | Tagged | Leave a comment

How To Build An In-House UX Team

The needs of real users are increasingly driving enterprise software design and development. Since 2013, IBM has hired close to 1500 designers and UXers, establishing the largest design studio network in the world. Art dealership and realtor Sotheby’s plans to boost its UX and product design team from 3 to 40 people in 3 years. Multinational manufacturer of product ranges Procter & Gamble (P&G) created a 12 person in-house design team, dubbed Clay Street that came up with innovative ideas which managed to revive an ailing brand.

IBM, Sotheby’s and Procter & Gamble are just the tip of the enterprise UX iceberg. Global organisations are increasingly moving to create their User Experience teams, swapping the external agency model for in-house teams working hand in hand with product developers. It is a brave new world of enterprise UX out there.

That being said, while adopting user experience approaches is vital for global enterprises, it is a challenging endeavour. Building an in-house enterprise UX team requires organisational, structural and attitudinal changes.

A successful enterprise UX overhaul means you have to:

  1. Be sure that having an in-house UX team is the way forward. (If, yes, proceed to point 2, else stop here.)
  2. Lay the groundwork for an in-house UX team.
  3. Hire that team.
  4. Structure it.
  5. Integrate this new UX team into the culture of the company.

Before we Begin: The Rise of UX in the Enterprise

It is tempting to ask – if introducing UX into an enterprise is so difficult, why bother? Why not just keep legacy software systems and hire agency UXers for occasional troubleshooting? Nice idea, but not viable. User experience has ceased to be an optional add-on and is now considered central to enterprise product development concerning profits, people, and productivity.

Profits

User-friendly software makes more money than unintuitive software. Take Walmart’s redesign of their e-commerce site, which resulted in a 214% increase in visitors. Or Bank of America, which increased online banking registration by 45% after a UX redesign of the process. In fact, according to D3 Infragistics, investment in UX gives a return of between $2 and $100 for every $1 spent, thanks to factors such as increased conversion or engagement, reduced drop-off rates and fewer internal training sessions.

People

Or more specifically enterprise employees. These are the individuals who have to suffer through unintuitive enterprise software for 40+ hours every week. In the past, employees accepted bad software as the norm. These days, thanks to rising software consumerization and the growth in software competition, teams are freer to choose their enterprise products and to change them if the experience is not up to scratch. Clumsy enterprise software just is not going to cut it in a world where start-ups like Slack and Zendesk are eating into territory formerly held by established software builders.

Productivity

As a rule, the better your software functions, the better your business functions. For example, Oracle enabled administrators to do their job 20% faster by improving their internal database software. In large organisations, these incremental improvements in productivity add up to millions.

As Jordan Koschei points out,

Fortune 500s tend to have a ‘just get it done’ attitude toward internal tools, resulting in user experiences that are not well designed or tested. By giving those tools the same attention to experience that you give consumer-facing products, you can improve the lives of your users and support the organisation’s values and brand.

1. Deciding Whether an In-house UX Team is the Right Move

The advantage of having your in-house UX team is that you will have a dedicated team of professionals that operates from the company’s offices and is fully committed to contributing to the benefit of the business and its product/s.

The downside to this is that you incur the financial and human resource burdens associated with managing and operating this team. If you can guarantee a steady stream of work, then the benefits will probably outweigh the costs as in-house will always be cheaper than outsourcing. However, this is too much of a simplistic view. In this case, the following considerations need to be made:

Long and Short Term Considerations

Agency UXers will have extensive experience in working on many projects. They will be typically skilled and collectively can execute a design project from start to finish. They also have established workflows and procedures in place and the appropriate mechanisms to ensure their monitoring and effective execution. These are clear advantages over building your UX team in the short term. In the long run, however, an in-house team will reach the same level of efficiency. Your in-house team will also evolve within the company culture – a great advantage since they would always put the business and its clients first. So the question here is whether you can afford to invest in the long term. This will probably require a two-pronged approach by hiring the services of a UX agency for short-term needs while you are building your team for the handling of long-term needs. Having your in-house team working with an external agency will also be beneficial for them to learn about industry best practices, thus lessening the learning curve.

Availability of Resources

A UX agency will work on a project and deliver it (theoretically) at an agreed-upon delivery date, irrespective of whether, say, one of their employees has quit. This is because the responsibility of what is delivered and who delivers it falls in the UX agency’s domain. Conversely, with an in-house UX team, you need to deal with HR issues as well as optimising your team’s workflow. This has the advantage that you are likely to get more flexibility from your in-house team since you manage the entire design process.

Software and Hardware Resources

A UX agency will have its software and hardware resources. This means that there are no setup and maintenance headaches or expenses to incur. On the in-house side, you need to factor in the human and financial resources to keep your in-house UX team running. This also means that with every new team member that you recruit, you need to set up their machine, while ensuring that the current infrastructure can keep up with the additional demand. You also need to take care of employee off-boarding when they leave your company. The agency approach is more advantageous here. The only advantage of the in-house UX team is perhaps that you can pick and choose the software and hardware you use.

Adaptation to Company Culture

This is a double-edged sword. A UX agency has the advantage that it can take a clinical, non-biased, external view when working on your projects. This paves the way for innovation and uniqueness. It will give you what you need rather than what you may want. However, this may lead to disagreements or, worse still, a templated approach where you get something standard that the agency gives out to its clients. Conversely, an in-house UX team will take into consideration things like the company culture, its customers and its objectives. They can pull in internal resources to say, better understand the product or service they are working on. This paves the way for customisation. However, it may also lead to conformism and a too cautious approach.

In his role as UX Consultant, Justin Mifsud, founder of this site, UsabilityGeek, has been involved in the setting up and management of UX teams across many companies, and he feels that the biggest challenge for the in-house UX person involves establishing their domain.

He states that very often they may become demotivated and frustrated when they see that company culture affects their workflow and/or may force them to go against established UX methodologies to achieve business objectives. This can take various forms, but perhaps two of the most common are:

  • The decision to forego necessary steps in the system design process such as wireframing and testing;
  • Interference from senior management in other departments who request system features and changes based on their personal experiences or hunches, without consulting data at hand or user testing.

So why do these things happen? It could be the urgency dictated by the environment that the company operates in, the need to ‘get to the market quickly’. It could also be a lack of understanding and / or a lack of appreciation of what UX entails.

This affects anyone within the UX department, but the effect can be more severe for those team members who come from an agency background or who have landed their first UX job with your company.

The consequences are not pleasant. Employees can quit their job, and the department will inevitably become dysfunctional. At the very best, if the UX team bows down to such pressure, then the actual benefits of having an in-house UX team will be lost. Furthermore, the innovation and specialisation of the UX team will also be lost. In the end, it is not healthy either that the UX team operates as a silo. So the best approach is a trade-off between best practice and the company’s requirements. Remember that after all you need to win key, influential employees over so as to promote a UX culture within the organisation.

2. Laying the Groundwork for a UX Overhaul

So let us assume that the decision is taken to build an in-house UX team. Before HR go on a hiring spree it is necessary to prepare the organisation, and all its employees, for this swivel towards user experience. This preparation can be distilled into two main areas – organisational and attitudinal:

Organisational

Before introducing a new UX team, conduct an organisational assessment to decide where the new department will fit in, and how they will link to others in the organigram. Additionally, assess the enterprise’s current UX maturity using the UX stages outlined by Jakob Nielsen (stage 1-4, stage 5-8) to find out whether the company has existing, unacknowledged user experience skills buried in other departments.

Attitudinal

Everyone, from the C-Suite down, will have to be made aware that a UX overhaul is happening, and why. Internal documentation assuaging any employee anxieties is helpful, and product development managers need to start promoting UX design as crucial to long-term success.

All global enterprises will have existing procedures, project management methods and product development flow that are not built with UX in mind. There has to be an acknowledgement of the importance of UX, and a willingness to make space for it before an enterprise can move onto the next step of actually building a UX team.

3. Hiring the UX Team

When it comes to recruitment, keeping the organisational analysis and proposed team structure to hand will assist in deciding which candidates fit into the roadmap. UX candidates do not necessarily have to have any experience working in large organisations, but they should have experience working in cross-functional teams and taking feedback from non-UXers. Janet M. Six gives some good advice on personality traits of great UXers in her UXmatters column.

Before an interview, take a good long look at candidate’s UX portfolios. You are looking for evidence of their UX process skills and descriptions of their approach to problem-solving, as well as detailed outlines of the part they played in previous projects and how they fit into a team.

With a view to future organisational harmony, it is possible to have existing design-development team members sit in on interviews and share their thoughts on candidates. This can help increase buy-in and provide a different perspective of what is required from the UX team.

4. Structuring and Organising the UX Team

There is no one-size-fits-all-enterprises UX team, unsurprisingly; that said, most UX teams will include some or many of the UX roles below:

  • Visual Designer: Similar to a Graphic Designer, the Visual Designer focuses on the big picture – the concept of graphics, typography, iconography and the colour schemes. Visual Designers attend to the aesthetics and rarely enter into the technical.
  • UX Designer: Deals with how the user is going to interact with the product. The primary responsibility of the UX Designer is to ensure that the product has a logical flow so that the user can move from step to step without getting lost.
  • UI Designer: Concerned with the form and distribution of graphic elements in an interface. While the UX Designer makes a design usable, the UI Designer makes it pleasant to use.
  • Interaction Designer: Understands how a user interacts with an app and builds interaction and animation into the design so that it reacts to the user’s touch/instruction.
  • Information Architect: Organises the design elements so that they make sense. The Information Architect deals with the structure of a website, app or any other interactive product.
  • Usability Expert/UX Researcher: Deals with the user’s needs. The aim of the research is to answer two questions: who are our users? And: what do our users want and need? This profile usually conducts interviews with users and does research about market data.
  • Metrics Analyst: Gathers and analyses financial and operational information for an organisation. The person performing this role may also be responsible for the analysis of costs and effectiveness of staffing practices and training programs.
  • Enterprise Architect: Works with stakeholders to create a holistic view of the organisation’s strategy, processes, information, and information technology. The enterprise architect uses this knowledge to ensure that the business and IT are in alignment.

The configuration of the team will change according to need. For example, if an enterprise wants to disrupt a product space, the team might skew towards UX Research. If it needs to implement a design system, then the team will require UX Managers. There can be quite a lot of overlap between these roles, particularly for young UX teams. The same person could perform the functions of the visual designer and interaction designer, and even UX designer, in the team’s early days. This will reduce initial outlay and allow the team to find its feet.

Once it has been decided what kind of roles to hire, it is time to figure out how the UX team will work with other teams. Essentially you have two options here, as laid out by Lean UX author Jeff Gothelf in his post on integrating user experience into Agile development – the internal agency model, or the hub and spoke model.

Internal Agency Model

A UX Manager acts as a gatekeeper, intercepting and divvying up incoming work to the team based on ability and capacity. This approach means that designers have to figure out how to make their output comprehensible to developers, for example through high fidelity prototyping. It also means that product teams have little understanding of the UX team, and vice versa.

Hub and Spoke model

UXers are placed within other groups such as product design, development, and marketing or sales. This, says Gothelf, is the stronger of the two alternatives when integrating with agile because UXers “feel connected to (the) team’s focus. In doing so, the designer’s priorities become clear.” This is true, but UXers should still have a team space and take part in UX activities, to prevent them feeling isolated or misunderstood.

5. Integrating the UX Team

Now comes the hard work of building acceptance and relationships between the new UX team and the rest of the enterprise’s employees. For UX designers coming from agency or start-up backgrounds, a global enterprise may feel alien and bewildering: for the established enterprise team, having a bunch of nebulous ‘experience designers’ around may feel like a distraction.

In fact, according to Atlassian’s Design Manager Alistair Simpson,

The hardest thing any designer will have to do is to convince the rest of the team or their company of the importance of really investing in user experience and design in the first place.

Existing departments have to open up to incorporating UX processes, and UXer newbies have to learn the new jargon and hierarchies of critique.

Dedicated integration activities can do a lot of the grunt-work in this regard. Integration activities should be designed to demonstrate the value added by UX to more established departments, and tackle the uncertainties of both UX team members and legacy employees. There are plenty ways to do this, but below are some ideas:

Evangelise UX Beyond the UX Team

Evangelizing UX is an ongoing effort that aims to promote the value of user experience to non-UXers. Jared Spool identifies “exposure hours” – the minimum hours per month that staff are required to spend with customers – as an essential part of this. Companies that mandate exposure times build more successful products because they know their users better.

Successful UX evangelising does not have to be powered by the UX team itself: most enterprises will have at least one executive who has already bought into the UX ethos and will be willing to support pilot projects and initiatives and to defend the value of UX if necessary. Getting that UX-friendly executive actively on board with promoting UX is an excellent way to earn acceptance.

Also, Jeff Gothelf shares some great advice on successful evangelising in an interview with Justinmind:

One of the most important things to getting this way of working accepted is transparency: people fear change, they fear for their job, their bonus, their salaries, and if you try to change stuff too quickly without telling them why, they’ll resist. The more transparent you can be about why you’re trying to change and what that change looks like, the more likely you’ll be to drive meaningful impact in your organisation.

To build transparency, communicate with employees through the organisation’s internal newsletter or news blog, giving examples of what the UX team is working on and how it is making an impact.

Invest in Internal UX Awareness Training

There are likely a lot of people in any organisation who have no idea what UX is, from management downwards. Even IBM acknowledges this, running design thinking boot camp for executives to change institutional thinking. One-off workshops that introduce UX, participatory design sessions and cross-functional user experience brainstorms are different ways to inculcate employees in user-centricity and get new team members to interact with established departments. Or for more in-depth training, try something like UX Designer Robin Titus did at CapGemini:

We started a small education program for the whole department to create awareness about what UX really means. Explaining the different methodologies like working with personas, user interviews, usability testing, user journey maps, interaction design, wireframes, mockups and prototypes. Most important — we did this based on real cases from our business — not just theory or common examples.

There is some great advice on running UX workshops in an enterprise on UsabilityGeek.

Have the UX Team Promote Their Process

The UX team can actively explain and evangelise their worth by revealing their entire process, from research to interactive prototypes. For example, broadcasting user testing sessions to non-UX team members is a good way to explain the usability testing process, and will help UXers justify their worth. By telling the story of how they add value, UXers can overcome any lingering doubts about their contribution and possibly open up new avenues of collaboration across teams.

Collaborative Ways of Working

Find the means for new UX team members to work together, perhaps by having them sit in on each other’s weekly meetings, by displaying project/sprint timelines in the same physical or digital space, or by initiating a buddy system, in which a UXer and a non-UXer spend a morning together each week working on a product problem.

Test the Team to Make Sure it is Working

There is only one way to know if a product works, and that is to test it on users. The same goes for an enterprise UX team: conducting a little self-assessment at regular intervals will help the new team identify its strengths and weaknesses, and get an actual idea of its impact.

Start out with a team analysis, documenting each team members core competencies on a scale of 1-5, then assess those core competencies against the projects the team is involved in; if there is a mismatch (say you are doing lots of UI building, but your team is heavy on UX Researchers), recalibrate them team and table a new hire when possible.

Also, talk to your users, or in this case, the wider enterprise team. A quick survey on their experience working with the team on particular projects may reveal stumbling blocks that would otherwise have gone unnoticed.

Ongoing monitoring of the integration and impact of a new UX team should come pretty naturally to UX professionals and will result in a stronger team that meets the enterprise’s needs.

Conclusion

Establishing an enterprise UX team is no cake-walk, but it is pretty do-able by following the core tenets of user experience design. Firstly, decide that an in-house team really is the best fit for your enterprise. If it is, listen to people, find out what they need and how they work, and give it to them. Find out what the enterprise needs, understand the individuals involved in delivering on that, and structure a UX team and workflow to meet those demands.

By encouraging a company culture that values user experience, promotes its value and supports UX projects, you will be well on the way to getting that buy-in and building products that create great user experiences. Just like the impossibly perfect product, you will never have the complete enterprise UX team … but you may end up building a team that works.

Source: Usability Geek

Author: Cassandra Naji

Posted in Knowledge sharing | Leave a comment

How To Manage White Space in Mobile Responsive Layouts

White space is a crucial design tool whether you realize it or not. Many designers adjust page elements until they “look good”. Most often this leads to a natural balance of white space between page sections just from gut instinct.

But when you get into responsive design this subject gets a bit tricky. White space needs to be adjusted at different breakpoints to create a seamless experience for all users.

This can be done with many different techniques and I’d like to cover the best ones here. All modern websites should be fully responsive so it’s no question that responsive design is important. The only question is how to handle white space so that all users have an awesome experience.

Rearranging The Navigation

Naturally the first thing every designer considers is how to handle the navigation menu.

If a site has dozens of links you really don’t have many options. You could use a select input field or a hidden menu with the three-bar hamburger icon.

White Space Responsive

Here’s an example where the top navigation doesn’t even resize. Once your browser window hits a certain breakpoint the links automatically hide into a menu and get replaced with a hamburger icon.

But pay attention to the extra whitespace added between each link. This is a common technique and generally a great idea to space out links for finger taps on mobile.

Dorigati

Most websites rearrange their navigation a few times before finally settling on the three-bar icon. For example Dorigati uses a full-width navigation menu which eventually breaks down into a grid system.

Then at the 960px breakpoint the entire layout shifts from a top header to a sidebar navigation. The logo and links all rearrange themselves into the new sidebar.

Once you go even smaller the nav links eventually move back to the top with a hidden hamburger menu. It’s a very complex solution but it provides a more natural experience for different browser resolutions.

And remember if the navigation is small enough then you won’t even need the hamburger. It’s generally a good idea to avoid hidden menus when possible, so a solution like Regent College would be perfect for sites with smaller menus

All links are still visible but they get rearranged into different widths. Font sizes get reduced and eventually the links are crammed together.

As long as visitors can still browse the site and tap on the right links then you can squeeze them together as much as needed.

Shift From Horizontal To Vertical

White space on a desktop layout moves across and down the page.

But when you’re dealing with smaller devices you should be more concerned with vertical space. This defines the pace of content and it’s the natural “flow” for smartphones & tablets with resolutions that are longer than wider.

Vertical Spacing

On Jisc you’ll notice there are many horizontally-oriented page sections. Once you resize the page all these little block elements drop beneath each other.

One page section would ideally span the entire width of a 320px smartphone screen. But the responsive layout needs more vertical negative space between elements to create that vertical flow.

The idea of negative space is powerful in web design. You need that space to break up sections of the page and to let blocks of text breathe. Nobody enjoys reading a wall of text.

This is true with corporate websites and with blogs like Mashable. When you’re on a desktop the entire homepage spans 3-4 columns of content.

But responsive users need to get a simplified version of one really long column.

Responsive layout

All the other columns can either drop beneath the main column, or they can be hidden from the responsive page. Each site has a different solution.

But when you’re shifting white space for mobile you always need to think vertically.

The horizontal should be controlled by one element at a time. You should instead focus on how much space you need between elements and between other sections of the page.

Font Sizes & Spacing

Some designs can get by with the same traditional font sizes. But if you have oversized headers or tiny paragraph text then you’ll need to adjust sizes at specific breakpoints.

There’s a lot you can do with responsive typography beyond the typical sizing properties. You can also adjust line height, letter spacing, color, and the margins between two blocks of text.

Web Responsive Type

The Next Web’s desktop layout has a lot of white space between the header and the top navigation. But their mobile responsive layout shortens this space dramatically.

Meanwhile the header text is also reduced in size while spacing out the paragraphs a bit.

You’ll have to trust your gut when it comes to mobile typography. Try to feel out what would look best and try to achieve that.

Also consider how your site behaves on mobile screens. Agra Culture has a series of image blocks that display text on hover.

Agra

But since mobile users can’t hover the text is automatically displayed past a certain breakpoint. It seems like a small consideration but it makes a big impact in the mobile experience.

White space increases between page sections giving the illusion of crafty content areas.

This same effect can be seen on Cartoon Network’s page where they have a top navigation with icons.

Responsive Nav

Past a certain breakpoint the CN logo shrinks down along with the main links. You’ll notice links that had icons will shrink down and completely lose the icons on smaller screens.

It is true that graphics can improve navigation. But there’s only so much space on mobile and you have to be judicious.

When restyling type always consider horizontal and vertical space issues. Mobile users deserve a workable solution even if the page has to be lengthened considerably just to hold everything.

Restyling Images

One other consideration is the use of widescreen images. Since most monitors are widescreen the web has adapted to include images that are typically wider than taller.

Mobile responsive sites either have to shrink these images down or rearrange them to fit properly.

UPP

UPP Broadgate Park has an interesting solution where the top header image resizes to fit vertically. The image slideshow is built to fit the full width of the screen, but any screen smaller than 500px gets a lengthened image.

This adds a tremendous amount of vertical space into the page which can be good if you’re looking for that.

I’ll admit this is a tough strategy to pull off. You need to know your image sizes and the focal points of each image to properly resize them.

But if you’re willing to put in the effort it will ultimately lead to a greater experience.

In other scenarios you might choose to hide longer images and completely remove them from the mobile experience. The Golden Isles website uses this technique on the top header slideshow.

Responsive White Space

All other images on the page get rearranged into single columns with added white space. But since the carousel doesn’t add much to the user experience it can be hidden for mobile users.

Consider how you want to handle images and how much space you need between them. A thumbnail gallery might be closer together than a slideshow or a featured stock photo.

Each scenario is different so be willing to try different strategies to see what works best.

Wrapping Up

White space is a crucial aspect of web design and it plays a big role in content flow for responsive websites. Most designers can estimate white space values by eye, but it helps to understand why you’re adding whitespace into a design.

If you think of any related trends or tips for crafting responsive white space feel free to drop a comment below.

Source: Design Modo

Author: Jake Rocheleau

Posted in Knowledge sharing | Tagged | Leave a comment

Desktop-First Design Tips for Responsive Websites

Most web designers know about mobile-first design and how it has dramatically affected responsive design. But there is another technique that may be less popular but can solve problems in a clearer fashion.

With a desktop-first approach you can build all the features you want and create them to the highest specs. Then as you test on smaller devices you’ll focus on keeping the interface light while supporting as many “high-end” features as possible.

This workflow is quite different but starting from the desktop can be better for web designers who create feature-rich designs.

The Benefits of Desktop-First

Technically “desktop-first” was the traditional way that everyone made websites up until the responsive era.

Nowadays many people talk about mobile first but there are good reasons to stick with the desktop approach. I often prefer starting with the desktop design when I know my site will have tons of detailed features on larger screens.

Here are some benefits of the desktop-first ideologies.

  • You get to see all major features at once
  • It lets you imagine all the largest possibilities for your design first
  • It’s the best strategy if your audience mostly uses desktops/laptops

When you think of modern websites like Twitter you think mobile. But they do have lots of extra features that come along with the desktop experience. These desktop users clearly get a heightened UX which is just as important as any other device.

The Benefits of Desktop-First

Granted there’s no denying that mobile is important. Just recently mobile use surpassed desktop so it’s definitely here to stay.

But feature-rich websites often depend on a strong desktop design.

This is perhaps the biggest benefit of a desktop-first layout. You get to see the site as it should look with all the bells & whistles. These extras can(and should) be removed for smaller screens as you test and find certain features just don’t carry over well.

Responsive Layout

Another way to look at this is through the simplicity of mobile-first design. When you create with mobile first you’re inherently starting with the simplest features, then adding extras for larger screens. But it’s real easy to forget features or just lack proper planning to decide where they should go or how they should function.

With a mobile-first approach it’s easy to consider dynamic features more like an afterthought. But with a desktop-first approach you’re treating these features as the primary display method, then choosing to remove them as needed.

There is no perfect choice so I recommend trying both to see what you prefer. If you’re like me and really adore the rich desktop experience then you’ll probably prefer starting there and working smaller.

Supporting All Browsers

The trickiest part of desktop-first design is handling browser support.

Just a decade or two ago the only market was desktops & laptops. The smartphone revolution changed all of that with tons of mobile browsers for iOS, Android, and other proprietary devices like Blackberry.

Most older browsers lacked support for modern desktop elements like canvas, audio/video, and dynamic inputs. But a lot has changed in recent years.

Nowadays it’s reasonable for all mobile browsers to basically support the same features as desktop browsers. Modern browsers also render most elements the same way so you won’t deal with rendering issues of the past.

The biggest differences are not in HTML/CSS support, but rather in touch-based support.

Supporting All Browsers

Mobile screens are much smaller and they also need to be tapped with a finger. Computer mice are more precise compared to a human finger, not to mention desktop screens are far more spacious and easier to look at.

When moving from desktop to mobile it’s crucial to consider how the different browsers work, what they support, and how to handle the user’s touch-based input.

A few good rules to consider while scaling down your desktop-first design:

  • Make tappable elements larger
  • Increase body text size so links are easier to tap
  • Add JavaScript libraries that support swipe motions

You can always check HTML5 specs for all browsers to see which elements are supported on which browsers. But for the most part touch inputs are a universal thing, so desktop-first is a great solution if you pay attention to the mobile experience too.

And you can find tons of free resources like TouchSwipe that add support for touch & swipe gestures to all websites.

You can use JavaScript to check the browser’s dimensions or the operating system like iOS or Win Mobile. With this info you can load extra stylesheets and create a totally different experience with touch/swipe events that only apply to mobile users.

Start with a list of features you know you’ll want on your website. Organize all the newer CSS3 properties, the newer HTML5 elements, and anything that might be iffy with browser support.

Then look up all the browsers you want to support to consider how you can handle fallbacks and polyfills. As time passes older browsers will phase out and browser support will get easier. This makes an even stronger case for desktop-first design because the rendering engines will be close to identical across the board.

To learn more and dig deeper into mobile interactions check out these related guides:

Graceful Degradation (And Why It Matters)

The process of graceful degradation looks at higher-level technology first. This means you build all your website’s top features with everything you want on the site, then if other browsers can’t support them you revert to fallback methods.

A common example of this tactic is the removal of dropdown sliding menus for mobile. Since smartphone users can’t hover menu links it makes sense to hide the hoverable menus and instead create a toggle switch or a hidden hamburger menu.

However this isn’t strictly graceful degradation, rather a change in user experience. Instead you’re looking for JS functions or CSS3 properties that literally cannot be supported in a certain browser.

For these you’ll need to find a polyfill or fallback that creates a less glamorous experience, but one that still works for the user.

Graceful Degradation (And Why It Matters)

Check out this list of examples created by the W3C. It covers graceful degradation in detail and it may help you move on the right track.

Thankfully since most modern browsers support JavaScript, HTML5 video, and canvas elements so you really have no limitations. The trickiest part is legacy support for outdated browsers. Yet this market is shrinking rapidly and you can gauge this by studying market share.

If you run Google Analytics you can study all browsers and OS’ from your audience to see which are the most popular. If nobody uses IE7 to browse your site then why support it?

Every problem you solve will be different so take it one at a time. Rely on sites like Can I Use to gauge what type of support you’ll need to deal with.

When Desktop Takes Priority

You may be wondering when desktop-first is appropriate. Should this be your default strategy for every project?

Maybe. But I think it ultimately works best when you’re designing a site where desktop takes priority over mobile.

If the mobile experience can be incredibly simple but the desktop experience needs to be detailed and dynamic, I say start with the desktop and work smaller.

If you always prefer working from desktop and moving smaller then you’ll get a knack for the process and it may become your default. And that’s totally fine because it’ll still lead to great results.

Just make sure you have a plan for the mobile site with at least a vague idea in mind of how it’ll look. Draft some wireframes for both views just to give yourself a starting point.

One great example of a strong desktop approach is Mashable. Their fullsize website spans 1440px wide and contains 3 columns of news with a huge mega navigation menu.

When Desktop Takes Priority

Mashable looks awesome on mobile too, but you can tell the desktop version was not an afterthought.

Same goes for major sites like YouTube where the user experience needs to work for both audiences. And in the responsive era it’s not just “desktop” or “smartphone”.

YouTube Design

You also need to consider tablets, smaller netbooks, and laptops that all have varying screen sizes. Desktop-first helps you build an experience that works on larger screens first by focusing on every possible feature.

Then you can whittle down the details to refine your interface so it works everywhere.

Wrapping Up

I typically build my projects from a desktop-first perspective because it helps define limits. You can choose how wide to make the site, what sort of grid system to use, and what sort of features you’ll need.

But if you prefer the mobile-first approach that’s completely valid as well.

The idea of debating one approach is tough because everyone has different workflows and they all have pros & cons. Find whatever feels right for you and make that work in your favor.

Source: Design Modo

Author: Jake  Rocheleau

Posted in Knowledge sharing | Tagged , | Leave a comment

User Research Bias: How It Hurts Your App And What You Can Do About It

The whole point of qualitative research (such as focus groups or in-person interviews) is to help developers move their products in the right direction. These practices leverage user feedback to squish bugs, fix any friction in the UI, add useful new features and optimise a mobile app for improved user experience and user flow. But can they be misleading?

Can User Feedback Bring More Harm Than Good?

Definitely. Especially if you are not careful.

User feedback can indeed be harmful. This is because people know what they want. They are just not good at voicing it. There is a quote that was reportedly said by Henry Ford (although this is debatable) that usually gets thrown around in discussions like these: “If I had asked people what they wanted, they would have said faster horses.” Yes, people know they want to go faster, they just do not know how.

If you thought it all comes down to the imagination, you would be partially right. Another reason is bias. Pure, scientifically-proven, bias. Our brains are wired in a way that we sometimes tend to ignore facts that do not fit our pre-conceived conclusions. We are quick to jump on bandwagons and stick to old conclusions, regardless of how irrelevant they might have become in the meantime.

That thing with horses? It is called ‘anchoring bias‘.

“Anchoring or focalism is a term used in psychology to describe the common human tendency to rely too heavily, or “anchor,” on one trait or piece of information when making decisions”, says Science Daily. In this example, the anchor is the horse, which humans of the time saw as the only means of transportation. All other conclusions are drawn from that fact.

But why is this relevant to mobile app professionals? It is relevant because they rely on their users’ feedback to shape and steer their apps. If their users’ opinions are biased (and they most likely are), and if app developers are not aware of that fact, they might end up trying to build faster horses, instead of building a car.

So the challenge for mobile app developers here is to differentiate between useful input and bias, and then optimise their products.

There is an app for that.

Well, sort of. Let us take a look at some of the primary forms of bias in user research, before moving onto possible solutions.

Main Biases in User Research

Usually, research bias can be split into two groups – bias from the respondents’ side, and bias from the researchers’ side.

As a user researcher, you want to make sure you are asking the right questions, the data you are getting is honest, and that you are not interpreting answers the wrong way. For this piece we will not go deeper into response interpretation. Instead, we will show you how to use technology to make sure you are getting honest, unbiased feedback from your respondents. In order to be able to use this technology properly, you first need to understand some of the more common types of biases that occur in research.

So let us take a look:

  • Friendliness bias: The manifestation of this kind of bias is that respondents seem to agree and support anything the researcher claims. They like every idea, and would positively act on every stimulus. It happens for several reasons, including seeing the researcher as a professional and thus valuing their opinion too much, or being too tired of answering questions and just going with the principle of least effort.
  • Social desirability bias: Ever since our ancestors dwelled in caves, being accepted into a group meant the difference between life and death. Being such an important issue, we have developed a subconscious drive to do whatever necessary to be accepted into a group. As a result, we sometimes tend to answer questions in a way we believe the team would consider best, regardless of what we thought of the question.
  • Familiarity bias: People tend to give similar answers to questions with similar words. Seriously. Mostly, familiarity changes people’s perceptions. We are wired to choose familiar over the unknown when forming beliefs or making important decisions. If you give a person a choice of three answers, one of which is familiar to him/her regarding the words used, they might choose that answer. Familiarity bias is widespread – we see it hurting business investment decisions, programming decisions, even life-or-death decisions. It is, thus, only logical that we will see it in app research, as well.
  • Funding bias: If respondents know what is being researched and who is trying to prove what, it will most likely influence the way they answer questions. When companies selling Cloud services do a market research, they often come to the conclusion that Cloud is the most important IT service there is, and that the sky would fall if everyone were not using it. Similar things happen with companies selling backup solutions, unified communications or collaboration tools. Also, companies outside the IT sector sometimes end up doing the same – their reports somehow usually support their interests. According to, well, everyone, this can sometimes be due to funding bias, or sponsorship bias. If the respondents in the survey know who is asking the question (for example, a Cloud company), and if they are aware that the Cloud company is trying to prove that Cloud is the most important IT service in the world today, their answers might be biased.

Conducting more in-depth research, you will probably find many other types of biases, but these four are generally considered the most influential. As mobile app professionals, you should keep both eyes open on these biases when analysing your app. If you ignore them, you might come to the wrong conclusions from your users’ feedback and steer your app in the wrong direction.

Eliminating Bias Through Qualitative Analytics

We can draw two conclusions from the four types of biases mentioned above:

  1. Respondents should not know who is doing the research
  2. Questions should not be worded similarly, and should not lead to an answer

If respondents do not know who is asking the questions, they cannot:

  • Be (too) friendly
  • Try to fit into a group
  • Know what the goal of the research is

And if there are no questions asked, then the wording can never be similar.

So if you want feedback on your app, that feedback needs to be anonymous. Users should not even be aware that they are being asked questions, and those questions should not have words. Freaky, right? Indeed it is, but it is also entirely possible with qualitative analytics tools.

These tools come with features like user session recordings and touch heatmaps. As the name itself says, user session recordings are real-time, unfiltered, unbiased recordings of app sessions. With a tool that supports this, app pros can see just how their users are navigating through the app, without having to ask that question and risk a biased answer. They get to see which app features are used most, and which are being ignored. They can see if the app has bugs or crashes frequently. They can also better understand if certain UI elements frustrate the users and deduce why.

Touch heatmaps, on the other hand, is a tool which aggregates all interactions users have with an app, like swipes, taps or pinches. Again, anonymously and completely unfiltered, this tool combines all this data and creates a visual touch map, showing app pros exactly how users interact with the app.

With such a tool, app pros can get an honest, unbiased answer on questions like is their navigation intuitive, user-friendly, or even worse – does the navigation work properly at all? Unresponsive gestures occur when users try to interact with a non-intractable element, like a picture or a logo. For mobile apps, unresponsive gestures are a huge issue, which app pros look to remedy as fast as possible.

Elude Bias

User feedback is fundamental to building any solid product, mobile apps included. However, you need to make sure your respondents are giving you ‘clean’ information. Otherwise, you might end up steering your app down a cliff.

In this article, we showed you how new technology solutions could be used to supplement user research and negate biases. These solutions can help you recognise biases and get first-hand, unfiltered and unbiased answers regarding your mobile apps. Which conclusions you will draw out of the information pulled from qualitative analytics is something we will leave for another time.

Source: Usability Geek

Author: Hannah Levenson

Posted in Knowledge sharing | Tagged , | Leave a comment

The Ultimate UX Design of: the Sign-Up Form

A typical sign-up form contains a couple of form fields (it seems like the most popular number nowadays is 3: e-mail, password and a peculiar “repeat password”) and a button. Is there anything to design in this minimalistic structure? Isn’t it too simple to focus on?

Unfortunately, many non-designers and some designers think exactly this way. If it’s visually simple (and tiny!), it shouldn’t be designed, as it would be a waste of time, right? Completely wrong.

I once tried to explain it to a stubborn design layman, who just couldn’t believe that if somebody visited a website and clicked on a huge button on the homepage which said “Sign Up”, they would suddenly leave the simple form without registering. “How come?” – he asked, “They’ve already decided to sign up… it’s just impossible they will be scared by three inputs”.

Well… pretty often they are. I showed him our data from Google Analytics. At that time 23% of people who clicked the huge button on the homepage were leaving the form, with three fields, without registering. 23% is a lot. Almost a quarter of the people were getting scared of the form.

I ran a quick study to grasp the reasons that cause people to leave my sign-up form. 70 people were nice enough to fill in a short questionnaire with open-ended questions. To my surprise, 33% of them pointed out “the fear of being spammed” as the main reason they always think twice before typing in their e-mail address anywhere. The complexity of the form (often considered unnecessary) and reluctance to waste time came in strong second place with 21%.

Chart

Studying dozens of sign-up forms made me realize that a lot of them fail due to these unfortunate errors. They’re far from being bullet-proof.

Let’s learn how to create a perfect sign-up form! We’ll go through a couple of examples and best practices, then by simply focusing on: safety, clear explanation, minimal form and engaging copy, we’ll create our own perfect pattern.

Let’s go!

Safety

Let’s consider, in the first place, what the reasons are for using a sign-up form. I’d say they are as follows:

  • Keeping the sensitive data of users safe (e.g. Mint.com, UXPin.com…)
  • Recognizing users as owners of certain data (e.g. Facebook)
  • Limiting access to a certain part of your service (e.g. any intranet)
  • Gathering user data for marketing reasons

Bearing this in mind, consider how a user might feel when confronted by a sign-up form. Most of the reasons behind a sign-up form might be really unclear for the average Internet user. What we don’t understand automatically scares us; no wonder then that many people leave our forms full of doubt and fear of fraud.

In most scenarios, you’re the one benefiting from the presence of the form, so the responsibility of spreading the feeling of safety among your users is definitely yours.

Strangely enough, most sign-up forms just fail to address this problem. Not indicating that typing in your e-mail address is a safe step, might force your users-to-be to reconsider the whole registration process. Would you risk it?

One of the rare good examples of sign-up form design is Mint’s form.

Mint.com Sign Up

Mint.com’s form is a great example of caring about the feeling of safety

Mint uses visual stimulation (a lock icon) to indicate that the whole process is safe. Norton’s and TRUSTe’s badges add an additional feeling of security to the form.

Mind that Mint also repeats the benefits that you’ll get by signing up. The usage of emotional language (“Why you’ll love Mint.com”) creates a feeling of intimacy and emotional attachment. That’s exactly what’s needed to destroy any doubts people can have about the service at this step in the process.

Mint.com Sign Up wireframing template

Download a wireframing template of Mint.com

(you’ll be redirected to UXPin App)

Another interesting example of reinforcing the feeling of safety might be observed in Songkick’s sign-up form. Songkick uses a very popular pattern of a social sign-in accompanying the classic sign-up form.

Songkick Sign Up

Songkick sign-up form provides a nice pattern of a social sign-in

A social sign-in, if done right, is an extremely powerful idea. It saves time and trouble. However, it can also beef up the feeling of danger. In the case of social services, spam won’t only hurt users e-mail inboxes but also their friends. That’s nasty. The indication of safety is an absolutely crucial thing in this type of registration process.

Songkick did a tiny, but powerful thing. They clearly stated that they “won’t post on Facebook without asking”. Of course they ask their users for a great deal of trust since it’s just a statement, but still, at least they address the fear in their customers’ minds and have a decent, soothing, answer for it.

If something might scare your customers – don’t hide, stand up and fight.

SongKick Sign Up Form Wireframing Template

Download a wireframe template of Songkick’s sign-up form (you’ll be redirected to UXPin App)

Explain

Following the pattern of “safety-enhancing” content, let’s consider another underestimated, but vastly important trick when it comes to increasing the conversion and user-friendliness of a sign-up form.

Explanation.

The whole concept of signing up is somehow artificial. It hardly has its equivalent in “the offline world”, therefore it’s not self-explanatory. We ask people to provide data in a format that we find convenient or safe and pretty often we don’t explain the reason behind it, or we don’t even inform about what format we expect.

How many times did you see forms that let you know that your password was too short, or didn’t contain any numbers? Too often. Information about the format of the password should be stated upfront.

Take a look at Github’s sign-up form.

GitHub Sign Up

Github’s form lets people know about password format before submission of the form

The form isn’t a star. It’s rather OK (though I don’t get why they use labels inside form fields and a “pick a username” field in this part of the process). The thing that’s really great is the tip about the password: “tip: use at least one number and at least 7 characters”. This can really save time and trouble for users. Most services put this kind of information inside the error message when the password typed in is too short or doesn’t contain a number – that’s not a user-friendly solution.

Github Sign Up Form Wireframing Template

Add Github’s wireframing template to your collection (you’ll be redirected to UXPin App)

Facebook follows the same pattern of explanation when it comes to the untypical form field of date of birth. They know most of their users will find it a strange question about their date of birth right on the sign-up form, so they decided to write a short explanation under the link “Why do I need to provide my date of birth?” Great move.

Facebook’s Sign-Up Form’s got a couple of clever ideas.

Take a close look at Facebook’s labels in the form. Can you see the label “New Password”? That’s a great example of taking care for safety in an unobtrusive way. Facebook suggest that you should make up a new password, not use the same pattern you used in dozens of other places. That’s a clever design.

Facebook Sign Up Form Wireframe Template

Add the Facebook Sign-Up Form Wireframing Template to your Collection

Do it for them

When you’re designing a sign-up form, you need to:

  • Eliminate the fear of spam
  • Make the form easy to comprehend
  • Eliminate unnecessary complexity

The efficiency of your form lies pretty close to its overall simplicity. You don’t want to force your users-to-be to spend/waste 10 minutes gazing at your sign-up form. You want them to type in some data and register in a couple of seconds.

That’s why the best sign-up forms I know do a lot of things for their users.

Take a look at Hunch’s form. They encourage you to sign in using your Facebook or Twitter account (“Why be old-fashioned?”) to save you some time and effort. Direct informal language builds a friendly situation.

Hunch Sign Up

Hunch’s social sign-in saves time and effort

If you confused the Sign-Up and Sign-In form and you already have your account (that’s often the case!) – Hunch provide you with a visible option to go to the right form. That’s an excellent pattern.

Hunch Sign Up Form Wireframe Template

Download Hunch’s Sign-Up form Wireframe Template

One of my favorite sign-up forms was designed by an amazing team at Podio. Podio have two sign-up forms that are an exemplification of their mastery of the art of doing things for their users.

The first form used on the homepage is a shortcut. One field, four icons (with a suitable explanation). Nothing to be scared of. A visually appealing form that looks as easy as 1, 2, 3.

Podio Sign Up shortcut

Podio’s mini sign-up form. Simplicity at its best.

This Sign-Up form certainly cannot be taken as a pure waste of time. Typing in your e-mail or choosing a suitable social sign-in option can’t take more than 10 seconds. That’s an impressive concept.

Download Podio’s mini sign-up form Wireframing Template

The larger version of the form is even better. Simplicity intertwined with clarity and persuasive techniques shows the extensive knowledge of Podio’s designers.

Podio Sign Up main

Podio main Sign-up form

It’s still just one field, but the social sign-in options are more straightforward. Mind that they didn’t go with the Facebook/Twitter standard, but rather tried to address the needs of their professional targets (GoToMeeting!)

The micro-copy of the form is just great. The “Good decision” headline builds a positive frame around the whole registration process. I simply love it. Podio also uses a social proof with a strong visual incentive. You can see that there are people who use Podio. If it works for them, it’ll probably also work for you, right?

The only thing that keeps Podio from perfection is the classic omission of the “asterisk”.

First of all, if there’s only one field, it has to be required. Secondly, if we’re putting an asterisk next to a form label, it should be explained.

Podio Sign Up Form Wireframe Template

Add Podio Sign-up form to your collection in UXPin

Copy counts

From the example of Podio’s sign-up form we could see how much great copy helps in the process of designing a sign-up form. The dangers of the registration process might be eliminated by smart, emotional, copy that continues the process of selling the product during the registration process.

Basecamp mastered this technique by using a social proof technique (“Last week 7087 companies signed up for Basecamp to manage their project. Today it’s your turn”) visualized with a picture of their real customer. That’s a powerful solution.

Basecamp Sign Up

Basecamp’s persuasive Sign-Up Form

They also indicate strongly that the sign-up process is simple and quick “You’ll be up and running in less than a minute,” and they make sure that if you have an account, you won’t be bothered by the form (“Log in here”).

This is by far the most persuasive form I’ve ever seen.

Basecamp Sign Up Wireframe Template

Download Basecamp’s Sign-Up Form Wireframing Template

Great copy should go all the way down to the tiniest details. A call-to-action might be a small thing, but it matters a lot. To my surprise, most of the forms go with a standard “Start your free trial”, “Sign up for free”. A great example of a context-aware call-to-action is represented by Tumblr’s sign-up form.

Tumblr Old Sign Up

Tumblr’s Sign up form

Tumblr’s call-to-action simply says “Start posting!” It’s highly encouraging and way more accurate than standard options.

However, a call-to-action is a sensitive element of any form. It should be thoroughly a/b tested.

Tumblr Sign Up Form Wireframe Template

Download Tumblr’s Sign-Up Form Wireframing Template

Step-by-Step Tutorial

Let’s use the knowledge that we’ve gathered above and go through the process of designing a perfect Sign-Up Form, shall we?

I’m using UXPin – The UX Design App to quickly create this user interface, but to recreate each step you can use your own weapon of choice.

1. Basic Structure

Basic structure

I’m setting up a canvas for myself. Since I already have some idea about the whole interface, I know that my content will probably be locked in 3 boxes, each representing important information.

2. Headline and mine division

Headlines

I’m adding a headline, trying to build a positive emotional frame around the whole process. That’s somehow addressing the idea of Podio’s form. I’m also setting up a subheadline with a link to a log-in form.

The whole form will be divided into two important steps, which are separated from each other by the line.

3. The form

the form

I’m adding a simple social sign-in and a two-field standard sign-up form. My call-to-action is rather generic, but if it was a sign-up form of a real service, I’d try to come up with something context-aware (like in the Tumblr example mentioned above).

I’m continuing to form a rather relaxed micro-copy. To encourage people to sign in with Facebook or Twitter, I’m stating that it can save time spent typing.

4. Safety

FormSafety

To increase the feeling of safety during the registration process, I’m informing users about our policies and rules:

  • We don’t spam our users’ e-mails
  • We don’t publish anything on our users’ Facebook and Twitter profiles without permission
  • We suggest adding a long password for safety reasons
  • The account can be canceled without any problems

These types of statement ensure users about our good intentions and general honesty.

5. Check password

Form Check Password

I’m a huge fan of the “check password” pattern. I think the “repeat password” field went way too far. Initially provided to ensure that people won’t make a mistake in their password, it can be easily replaced by a checkbox “check password”.

Why force people to type in their password twice when we can simply give them the option to check the password with one click.

6. Social proof

Form Social Proof

Finally, I’m adding a social proof. I treat it as a safety belt. In case of any doubts of additional proof that this service is safe, popular and well received by thousands of people.

Source: Design Modo

Author: Marcin Treder

Posted in Knowledge sharing | Tagged , | Leave a comment

The New Rules for Scrolling in Web Design

What was once taboo in website design has made a complete resurgence as one of the most popular techniques in recent years as users are finding a new love and appreciation for sites where scrolling is a necessity. Shedding its old stigmas, scrolling is reinventing itself as a core interaction design element – that also means designers need to learn the new rules.

In this piece, we’ll explore the rebirth of scrolling, discuss some pros and cons, and list out some quick tips for the technique.

Why Scrolling is Reborn

The simple answer is mobile devices.

Ever since mobile users have surpassed desktop users, UI designers everywhere have adjusted accordingly. And with so many users on smaller screens, scrolling is becoming more of a necessity: the smaller the screen, the longer the scroll.

But there are other factors. Access to high speed internet is available in more places, making the scroll a quicker way to access information than clicking from page to page. The growing strength of social media sites also feeds the technique: scrolling naturally accommodates their wealth of user-generated content.

As explained in the guide Web Design Trends 2015 & 2016, long scroll evolved right alongside card-based design. When combined, the techniques let you provide users an endless stream of bite-sized content (which is perfect for web and especially mobile experiences).

Plus, the above-the-fold doctrine that was holding scrolling back is now being recognized as the myth it really is. The truth, according to actual studies, is that users really don’t mind scrolling. The practice of jamming everything above the fold is losing out to spacing everything out along a even and smooth scroll.

Part of the reason the myth became popular, of course, was that scrolling was only seriously considered as an intentional design pattern after advances in Javascript and CSS. Before that, it was much more difficult to make scrolling “sexy” through visual storytelling. As you might imagine, a long page full of text (interrupted by occasional images) isn’t a very engaging UI layout.

The Boat

Photo credit: The Boat

But once you start approaching the long scroll as a canvas for illustrating a beginning, middle, and end (through graphics, animations, icons, etc.), then you start to see it’s film-like power in capturing user attention.

In fact, some hybrid patterns are emerging as the latest trend in scrolling. For example, the “fixed-in-place scroll” that we use on our own UXPin tour page creates the same interactive experience of a traditional long-scroll site without stretching the site vertically.

The Boat

Photo credit: UXPin

Is Scrolling Right for You?

With every design technique and tool, there are those who love the concept and those who hate it. In most cases, neither side is intrinsically right or wrong; that’s why it’s important to weigh all considerations before tackling such a project.

Advantages of Scrolling:

  • Encourages interaction – With the ever constant stimulation of changing element, it can be an interesting storytelling method that encourages user interaction – especially with tastefully-executed parallax scrolling.
  • Faster – Long scrolling is faster than clicking through a complex navigation path and does not slow down or limit the user experience. As described in Interaction Design Best Practices, the perception of time is often more important than the actual passing of time.
  • Entices users – The ease of use promotes interactivity and increase time on site. This is especially true for infinite scrolling sites, where you can help users discover relevant content that they may not have even thought of.
  • Responsive design – Page designing can get complicated across devices with different screen sizes and capabilities, but scrolling helps simplify the differences.
  • Gesture controls – Scrolling seems organically linked with touch, since swiping downwards is much easier than repeated taps on different areas of the screen. Users (especially mobile) are commonly accepting this as a way to display information.
  • Delightful design – Few clicks can result in quicker interactions for a more app- or game-like user experience.

Disadvantages of Scrolling:

  • Stubborn users – Nevermind why, some users always resist change. Nonetheless, the technique is so widespread now (especially during mobile experiences) that it’s probably safe to say that the majority of users are accustomed to the technique.
  • SEO drawbacks – Having only one page may have a negative effect on the site’s SEO. (To learn how to minimize these SEO downsides, check out this Moz piece for parallax scroll and this Quicksprout piece for infinite scroll.)
  • Disorienting – The disconnection between scrolling and content may leave users confused or disjointed.
  • Navigational difficulties – It can be awkward to “go back” to previous content on the page. To counter this, you could create a persistent top navigation where each item is anchored to a page section
  • Site Speed – Large pieces of content such as video or image galleries may slow down the site speed, especially for parallax-scrolling sites, which rely upon Javascript and jQuery (check out this tutorial to learn how to create parallax sites without slow site speed).
  • No footers – With infinite-scrolling sites, we’d recommend a lean “sticky” footer so you don’t sacrifice navigability. Otherwise, users may be confused by a lack of further navigation at the bottom of the page.

Advantages and disadvantages aside, the long scroll is a technique that suits some types of sites more than others. Longer scrolling websites and best suited for content and design plans that…

  • … are going to include a significant portion of mobile traffic (most users)
  • … include frequent updates or new content (such as a blog)
  • … have a lot of information presented in a singular way for comprehension (such as an infographic)
  • … do not contain rich media because of the drain this can cause in terms of load times

Social media sites, with constant and extensive user-generated content, do well with long scrolling (in fact, Facebook and Twitter helped popularize the technique years ago). On the other hand, goal-oriented sites like e-commerce – which require coherent navigation – tend more towards conservative page lengths.

Amazon

Photo credit: Amazon

The middle ground would be a site like Etsy, an online store for user-generated products, which uses a hybrid solution: several pages of so-called “infinite” scrolling, ending with a call-to-action of “Show Me More.”

Etsy

Photo credits: Etsy

Like all web design trends, don’t use longer scrolls just because you’ve seen other sites follow the pattern. Make sure your website fits the criteria we’ve discussed, otherwise you might actually experience worse performance.

Scrolling Best Practices

Long scrolling, parallax effects and similar mechanisms are still relatively new to the realm of design (~4 years) , but still some rudimentary trial-and-error has produced some fundamental best practices.

Summarized from Web Design Trends 2015 & 2016, here are some everyday tips for successfully implementing long scrolling.

  1. Don’t be afraid to alternate long with short scroll. Let the content dictate the scroll length, not the other way around. It’s totally fine (and quite popular) to use a short-scroll homepage and long-scroll landing pages (like Products, Tour, etc.).
  1. Consider sticky navigation, such as that used by Free Range Designs, so that users can always “get back” quickly or bounce from element to element in the scroll.
  1. Suggest scrolling with design elements or tools so that every user can quickly see how the site works. Arrows, animated buttons or similar user interface tools are fun and easy ways to help the user determine what to do next. Some sites even include a small button with instructions like “Scroll for More” or “Get Started” to help navigate a site with unconventional techniques.
  1. Make clear distinctions between scrolling clicks or taps and other calls-to-action so that your website gets the desired interaction.
  1. Do some research and look at how users are interacting with the scroll. In Google Analytics, for example, you can open the “In Page Analytics” tab to see how many people click below the fold. Based on the data, you can then tweak the design as necessary.
  1. Don’t go overboard. Long scrolling does not mean 500 pages of continuous content – a long scroll can also be simple. Tell your story and then stop. Don’t force it. Deca, below, uses a scroll that is only a few pages long.

Decasrl

Photo credits: Decasrl

  1. Focus on your user goals and accept that even infinite scrolling sites are not truly endless. When creating longer-scrolling sites, understand that users still require a sense of orientation (their current location) and navigation (other possible paths).
  1. Include visual cues that help orient users in the scroll, such as the helmet icons used in the left hand side for “The Seven Types of Motorcycle Rider” site below.

MCaleicester

Photo credits: MCaleicester

Scrolling can be a double-edged sword, so stick to its recommended usage to avoid it doing more harm than good.

Pageless Designs of the Future

Long scrolling sites are not going anywhere. While we’ve seen ebbs and flows (or increases and decreases) in the sizes of screens on popular devices, small is here for the foreseeable future. And small screens require more scrolling.

Actually, the transition from long-scrolling to “pageless” design has already started, and some designers (like those at Digital Telepathy) even believe it is the future of the web. As websites continue to shed some of the constraints of how users think about and consume information, designers must think more radically about the best ways to create content in different environments.

Interaction design is the foundation of long scrolling website design. If users like the interface and find it intuitive and fun to use, then they won’t really mind the length of the scroll (as long as it’s not atrociously long).

You don’t always need to shorten the line – you could just make the wait far more entertaining.

Source: Design Modo

Author: Jerry Cao

Posted in Knowledge sharing | Tagged | Leave a comment

Empathy’s Role in Experience Design

Empathy is nearing played-out-buzzword status: overused and overhyped and caricatured to the point where any real nuance or subtlety is hard to come by. Use of the word empathy these days is almost as likely to generate a round of eyerolls as it is to inspire compassion. Has it joined the ranks of ideas like “disruption” and “innovation”? Perhaps.

But, as with these kinds of terms, even if the concept of empathy is beginning to feel a little worn, that doesn’t mean its original significance is gone or irrelevant. Like a comfortable pair of jeans, we should celebrate that a concept such as empathy is beginning to feel familiar and worn in, rather than dismissing it as worn out and worthless.

Empathy is a critical component of, but not the complete center of, the design universe. It’s necessary but not sufficient. It’s a means, not an end. And it may not even be a means for all types of design. For instance, in human-centered design, it’s completely necessary as a contrast to considering only one’s own personal experiences, or extrapolating from a single perspective while designing for other humans with other experiences and perspectives.

But human centeredness isn’t all there is to good design. It’s just one approach to identifying needs and solving problems, and while it has been the prevailing philosophy in recent years, that doesn’t mean it will continue as such, or that it is always the right approach for all design challenges even at present… and the same may be said of empathy as a key design ingredient.

From a systems thinking perspective, we can certainly conceive of myriad scenarios and circumstances (e.g. wicked problems such as healthcare, education, climate change) that won’t be solved by the current conception of human-centered design. Though not in direct opposition to human-centered design, practices such as service design and transition design broaden the problem space to the point where it makes less sense to focus on single individual humans as a guiding design method. That’s not to say empathy is no longer needed — simply that what it means to build it and what we do with it may change.

Empathy is a means, not an end.

Empathy is the kind of word that designers must grab onto before it gets away from us as a profession. Disruption, innovation, failing forward, design thinking, human-centered design, ethnography, curiosity, making: these concepts used to be new! and important! and over time have become familiar and even hackneyed. But they have also become table stakes for good design practice. Similarly, empathy isn’t a trend. Even as some may grow tired of the word, that fatigue stems from the phenomenon of too many people talking about it and describing its necessity without really cutting to the core of it is or what to do with it.

What is it?

Empathy is usually conceived as “feeling what someone else feels” or “walking in someone else’s shoes.” But perhaps more importantly, empathy isn’t the same as sympathy, and it’s more than just imagining what it feels like to experience something from another’s perspective. There is a difference between cognitive empathy (the capacity to understand another’s mental state), and affective empathy (feeling and responding to another’s emotional state).

It’s critical for designers to understand the difference and act with intention to design with the type of empathy that best serves the unique circumstances of their work at any given point in time. There is a very real difference between metaphorically putting oneself in someone else’s shoes in order to think through the kinds of problems they might face, and feeling on a deeply genuine level the emotions and affective experiences that someone else is facing. We must understand what we truly mean when we say we design with empathy. It’s not playing dress up with someone else’s life; it’s thinking and feeling what someone else thinks and feels in order to better understand the experience we’re trying to improve.

What do we do with it?

It’s not enough to feel connected to one’s design audience. Empathy is a means to better design, to better outcomes — which is achieved by weaving empathy into the methodologies we use, not simply just caring about our design audience. Indi Young recently discussed some of the implications of empathy within persona development: “cognitive empathy requires not a face, not preferences and demographics, but the underlying reasoning, reactions, and guiding principles.” And MadPow’s Jamie Thomson has shared her own insights from designing with empathy at the intersection of healthcare and experience design. Activities such as shadowing, empathy mapping, gamestorming, and journey mapping help us develop empathy, while activities such as generative making, collaging, and collaborative sketching help us put that empathy into action for solution ideation.

As design evolves, the role of empathy will evolve with it.

The natural evolution of design empathy and for designers in general is to more broadly acknowledge what can be inherently paternalistic about our work and our interpretations of empathy. Consider even the term “user” or the phrase “designing for…” and the implications of that dynamic.

There is a very real shift beginning to take place that moves us away from:

“Let me understand how this looks and feels to you… now let me solve this problem for you by pretending to be you and layering my design skills on top to solve it.”

…toward something more like…

“Let me understand how this looks and feels to you… and now let me use that understanding to build tools with you so you can solve that problem any time.”

…and eventually to a lack of differentiation between me/designer and you/designee:

“Let me understand how this looks and feels to you… and you can understand how it looks and feels to me, and we’ll design something together toward a shared vision.”

Empathy is going to be the critical component in a design evolution that leads to a world where everyone designs — and our roles as design practitioners become more of facilitation than problem solving. Certainly we’re not there yet — our ‘users’ and ‘clients’ still need us to help design better experiences for others because there’s no way for those customers to create it themselves. But as we shift toward a future with more access and participation (made possible by technology first and foremost), it will mean we create experiences (digital and otherwise), and ultimately systems, that are more flexible and socially sustainable in the long run.

I have personally been thinking about design this way since I met Liz Sanders, who has written a lot about participatory design and generative design research. More recently, Dan Lockton has been writing about similar themes as a way of designing for agency, and Kevin Slavin writes similarly about design as participation. There is growing momentum for this approach to design and I believe empathy is still the keystone of these conversations.

So what is the future of empathy? Perhaps it will be seen in the type of methods we apply it to: cultural probes, empathy collaging, generative toolkits. These are methods I use today and see designers embracing more significantly in the future. But these methods and others we use at MadPow are not meant solely to build empathy among designers by imagining themselves in their users’ shoes; instead, they are meant to bring the users (ahem, fellow humans), into the same room as designers and to dissolve the distinction between them — engaging all to co-design more innovative and sustainable experiences and systems… and futures.

In this way, empathy becomes something actionable, allowing it to evolve in a very real and meaningful way, not as the empty buzzword whose peak relevance has passed.

Source: UX Magazine

Author: Jen Briselli

Posted in Knowledge sharing | Tagged , | Leave a comment

User-Centered Design: An Introduction

We live in a world where everything changes extremely fast; new products, new degrees, new careers, new methodologies. It is somewhat scary to imagine that school graduates will be in positions that do not even exist in 2017.

However, we are now witnessing a clear trend – companies no longer push products to the market. Instead, they focus on the user to personalise a product and at the end deliver what they, the client wants. This switch provoked some significant changes in careers. For example, whereas up till just a couple of years ago we saw a considerable number of sales positions, we now see more and more posts related to humans, for example, human-centered innovation, user-centered design, and the like. This trend is evident in companies that invest in innovation such as fast-growing startups (say Typeform) and large organisations (such as Banco Sabadell). Moreover, if you look at leading business schools and universities, such as IESE, Esade and Stanford, you will see that they have started implementing user-centered design to their programmes.

What is User-Centered Design?

User-centred design (UCD) is a collection of processes which focus on putting users at the center of product design and development. You develop your digital product taking into account your user’s requirements, objectives and feedback. A more formal definition is the one provided by the Usability Professionals Association (UPA):

User-centered design (UCD) is an approach to design that grounds the process in information about the people who use the product (Usability Professionals Association)

User-centered design vs. Human-centered design: User-centered design is very often used interchangeably with human-centered design, but there is a difference in that it is a subset of it. Simply put, all users are humans, but not all humans will be your users (you wish!). Thus, user-centered design requires deeper analysis of users – your target audience. It is not only about general characteristics of a person; it is about particular habits and preferences of target users to come up with right solutions for specific problems.

User-centered design takes into account age, gender, social status, education and professional background, influential factors, product usage expectations and demands and many other important things that may vary for different segments. What is critical for some may be irrelevant for others. User-centered design is about deep research on users’ habits, from their interactions with the product to their vision of how the product should look like and behave.

User-centered design and UX: User-centered design improves the user experience. While it can be applied to almost any product, in this article, we will focus on website or mobile app development. It helps to understand users’ needs and preferences regarding features of a product, task, goals, user flows, etc. At the end of the day, it has become one of the most important user experience requirements – that of being user-centered. It should be implemented throughout the entire customer experience, no guessing, no personal opinion. What matters is what your users say and do. Every “touchpoint” that the customer has with the product should be analysed, well design and developed.

User-centered design in the commercial world: Unfortunately, there are still some companies that prioritise business goals over those of their users, prompting them to first design a product and only then search for people who would be interested in using it. User-centered design advocates the exact opposite. Before developing your idea, you need to find and speak with (representatives) of your target users first. This is because even though you have cool features, breathtaking technological capabilities and other awesome things, if you do not know your target, you have a big problem. Suffice to say that you will find yourself in a situation where, post-launch, you will need to spend a lot of money on redesigning your features or maybe you end up in a situation where you do not have enough interest in your idea to break even. You need to think about the end user right from the beginning.

In other words, user-centered design is about designing and developing a product from the perspective of how it will be understood and used by your user rather than making users adapt their behaviours to use a product. The idea is to offer a product which would support its users’ existing beliefs, values, attitudes, and habits.

As you may guess, the result of employing user-centered design to your process is a product that offers a more efficient, satisfying, and user-friendly experience for the user, which leads to increased sales and customer loyalty.

User-Centered Design Principles

There are five major UCD principles

  1. A clear understanding of user and task requirements.
  2. Incorporating user feedback to define requirements and design.
  3. Early and active involvement of the user to evaluate the design of the product.
  4. Integrating user-centred design with other development activities.
  5. Iterative design process

It is quite simple – if you change the design late in the process, then it will typically cost ten times more than if you changed it during the requirements stage. Analysis and feedback are critical. User-centered design makes sure that you design and develop products right from the beginning, exactly what your clients want.

The Essential Elements of User-Centered Design

  • Visibility: Users should be able to see from the beginning what they can do with the product, what is it about, how they can use it.
  • Accessibility: Users should be able to find information easily and quickly. They should be offered various ways to find information for example call to action buttons, search option, menu, etc.
  • Legibility: Text should be easy to read. As simple as that.
  • Language: Short sentences are preferred here. The easier the phrase and the words, the better.

What is The Process of User-Centered Design Like?

User-centered design starts by identifying the target end users of the product and specifying the context of use. The main objective is to establish why these users would be interested in your product and how they want to use it.

Then, it is important to group your data to formulate a set of requirements and user goals that must be met so as to ensure that the users’ needs are satisfied.

It is only after these two steps are completed that you start designing potential solutions. The design phase can be iterative in nature and can evolve from a rough concept to a complete design.

Take into account your goals, as you start this iterative process of product design and development. At the end, you need to evaluate the product you developed by doing, for example, usability testing to get users’ feedback. This process should be repeated until the best design is achieved.

These users’ requirements are found and defined through methods like focus groups, usability testing, card sorting, participatory design, questionnaires and interviews. Typically the following areas are analysed to get a better idea of what your target users want:

  1. Persona: To visualise it better, a persona is created at the beginning of the process to have an example of a target, who you are trying to reach. You can even come up with the name. It is a representation of a particular group of people with the same patterns; behaviour, needs, goals, skills, attitudes, etc. Persona helps to make right decisions about product features, navigation, interactions, visual design and much more. It helps you prioritise the design work, understanding what the user needs and what functions are simply nice to add and have.
  2. Scenario: It is a “daily life of” your target, of your persona. It is about problems persona has. Here, small details both emotional and physical ones, matter.
  3. Use case: It is a series of steps for the persona to achieve the goal.

Webcredible provides a handy guide to which technique to use and when:

Popular user-centered design methods (Source: WebCredible)

The user-centered design process answers crucial questions about users, about their tasks, goals and beliefs. The following questions are typically asked during the UCD process: Who uses your product? What are their goals? What are users searching for? What are they interested in? How do your users see the process of completing a task? What do they say and how they do it? How easy is it for your users to understand what they should do using your product? How much time do users spend on figuring our how to actually do what they want to do? And many others.

User-Centered Design and Agile

Agile methods are becoming increasingly common in software design and development, with their collaborative customer focus and iterative, test-driven approach. They are gaining acceptance in organisations as an efficient and effective ways to developing software products that make a difference. And user-centered design fits very well with Agile. Mind you, user-centered design also fits in with other development methodologies, including the (dreaded) waterfall methodology.

Here you will see some advantages brought about by the incorporation of user-centered design with an Agile methodology:

  • Customer Focus: All activities are focused on the user, on his/her needs by providing value through ensuring a useful, usable and engaging product.
  • Iterative Development: Early and frequent delivery of working software contributes to project visibility, reduces project risk via regular feedback, encourages continuous improvement and enables early realisation of business benefits, time to market.
  • Testing: Testing plays an integral role in every phase of the project life cycle. User testing is crucial for designing a product to ensure that you are working on the right thing at the right time.
  • Transparency: As stated by Marc McNeill, all stakeholders are provided with maximum visibility into project progress.
  • Cost reduction: Costs are reduced because users can understand and use products without additional help. There is also a reduction in training costs. Moreover, there is no need to spend time and money on redoing things.
  • Higher customer satisfaction: At the end of the day, the user receives what they want and how they want. As you deliver what is requested in your target market, you guarantee increased sales.
  • Risk reduction: As you work hand in hand with your user, you are sure you are going in the right direction.
  • Productivity: As you always do what your user wants, there is less need to spend time on unnecessary things or features that users will not use or like.

If you look at leading companies like Mango, HSBC, Edreams and others, you will see that they went through an agile transformation and now they are adopting this user-entered approach. These two methodologies go together, and I believe that they are key to successful innovation.

Source: Usability Geek

Author: Ekaterina Novoseltseva

Posted in Knowledge sharing | Tagged | Leave a comment

The Term Game: Usability Definitions

When it comes to learning about the web, optimization, and usability, it often feels like we’re confronted with a whole bunch of buzzwords and acronyms without much context.

UX? UI? UCD? Want to know the difference once and for all without having to consult Google?

Well, you’ve come to the right place. We’ve put together a short usability dictionary of the terms we come across in our day-to-day scrolling. So grab a coffee, put your feet up, and get ready to learn.

Usability

According to the International Standards Organization (ISO 9241), Usability is the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use. In other words, good usability implies that users can easily use a product and by doing so, reach their goals quickly and without meeting friction. Some aspects of usability overlap with the user experience (UX) of a system, meaning good usability should also include a good user experience.

User Experience (UX)

UX is the subjective feeling a user gets when using a product, system, or service. User experiences are drawn from a user’s individual perception of different aspects of the experience such as appeal, information content, accessibility, credibility, relevance, ease of use, etc.

User Interface (UI)

The UI is the interface of any machine or system the end user interacts with. Through the user interface, the user operates the machine or system and receives feedback over success or failure of the given orders. In order to fulfill the requirements of good usability and user experience, a user interface needs to be usable, intuitive and, to a certain degree, fun to use.

Usability Engineering

Usability engineering basically covers all aspects related to establishing usability. However, it’s not about the design of a product but about creating computer interfaces that allow users to effectively and efficiently accomplish their goals. Alongside this, usability engineering links the challenges claimed by the user with often inflexible organizational processes.

Human Computer Interaction (HCI)

As you might have guessed, HCI is all about people, computers, and interaction. Basically, it’s how people use computers. HCI looks at human usage of interactive computing systems from multiple perspectives including computer science, psychology, ergonomics, and sociology. The main objective is it to bring users and computer systems closer together so systems can be used more effectively.

Interaction Design

When we hear the term interaction design, we might be tempted to believe that it’s the actual design we encounter on a website. However, while a graphic designer comes up with the visual design, an interaction designer is responsible for the dialog between user and interface. Interaction design covers the conception and functionality of an interface which facilitates the communication between user and interactive system.

User Centered Design (UCD)

UCD describes the development process of any kind of product or user interface that has the end user as its main focus. UCD always starts with a thorough analysis of the needs, expectations, and limitations of the user. The design process is iterative and involves repetitive user testing to validate each step of the process.

Iterative Design

Iterative design describes a cyclic design process which is defined through repetitive user testing. Based on a first concept, a prototype is created. This prototype is tested to verify the concept. After analyzing the test results, the concept is refined and the design goes into its next iteration. This process is repeated until users find no more issues that need to be addressed.

Search Engine Optimization (SEO)

The Web offers endless opportunities to sell services, information, or products. However, in order to profit from these opportunities, it is essential to rank high in search engines like Google or Yahoo. Using SEO best practices to optimize your elements such as your website copy will increase the chance that your website is found and, in turn, drive traffic to it.

Conversion Rate

Conversion rate describes the number of users who engage in desired actions after visiting your website. These actions can be subliminal or direct requests made on the website. Depending on the services you offer, this can be a signup for an account, the purchase of a product, the request for further information, or anything else you want your users to do.

A/B Testing

A/B testing is a simple yet effective method for testing changes to a web page, and for determining how those changes affect conversion rate. Imagine you have two versions of your homepage: version A and version B. As visitors come to your homepage, you choose to display version A to 50% of your visitors; whilst showing the other 50% version B. Observing the visits to each version of the homepage combined with some quantitative and qualitative analysis will then show you which version performs best, and thus, should be implemented.

User Feedback

User feedback is the best way to get qualitative insights on your website or app, regardless of whether you’re running A/B tests or not. Use tools like Usabilla to prompt your visitors for either solicited or unsolicited feedback meaning you can make the most of your time by basing decisions and changes on real, contextual insights straight from the people who use your products most.

Source: Usabilla Blog

Author: Robyn Collinge

Posted in Knowledge sharing | Tagged | Leave a comment