UXD Jobs News & Events

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



The Principles of Service Design Thinking – Building Better Services

Service design is all about taking a service and making it meet the user’s and customer’s needs for that service. It can be used to improve an existing service or to create a new service from scratch. In order to adapt to service design, a UX designer will need to understand the basic principles of service design thinking and be able to focus on them when creating services.

The principles here are drawn from the design ethos of Design4Services, the organization that is committed to developing service design and promoting business transformation. These are widely accepted in the commercial sector. There are other ways of approaching service design, which are not as widely used but which may add value to the service designer’s toolkit; we have listed some of these approaches in the resources section at the end of this piece.

General Principles of Service Design

The general principles of service design are to focus the designer’s attention on generic requirements of all services. They are complemented by principles that relate to process design, organizational design, information design and technology design – we will come to these complementary principles in a few moments.

The general principles of service design are:

  • Services should be designed based on a genuine comprehension of the purpose of the service, the demand for the service and the ability of the service provider to deliver that service.
  • Services should be designed based on customer needs rather than the internal needs of the business.
  • Services should be designed to deliver a unified and efficient system rather than component-by-component which can lead to poor overall service performance.
  • Services should be designed based on creating value for users and customers and to be as efficient as possible.
  • Services should be designed on the understanding that special events (those that cause variation in general processes) will be treated as common events (and processes designed to accommodate them)
  • Services should always be designed with input from the users of the service
  • Services can and should be prototyped before being developed in full
  • Services must be designed in conjunction with a clear business case and model
  • Services should be developed as a minimum viable service (MVS) and then deployed. They can then be iterated and improved to add additional value based on user/customer feedback.
  • Services should be designed and delivered in collaboration with all relevant stakeholders (both external and internal)

Process Design Principles for Service Design

Much of service design is found in the design of processes, both internal and external, and these principles underpin this:

  • Any activity that fails to add value for the customer should be eliminated or minimized
  • Work is always structured around processes and not around internal constructs such as functions, geography, product, etc.
  • Work shall not be fragmented unless absolutely necessary. This enables accountability and responsibility from a single individual and reduces delays, rework, etc. It encourages creativity,innovation and ownership of work.
  • Processes should be as simple as possible. Focus on reducing process steps, hand overs, rules and controls. Wherever possible the owner of the process should have control over how it is delivered.
  • Processes should reflect customer needs and many versions of a process are acceptable if customers have different needs.
  • Process variation should be kept to a minimum.
  • Process dependencies should be kept to a minimum. (I.e. process in parallel)
  • Processes should be internalized rather than overly decomposed (e.g. training is better than work instructions)
  • Process breaks and delays must be kept to a minimum
  • Reconciliation, controls and inspection of process must be kept to a minimum
  • KPIs for processes will only measure things that matter

Organizational Design Principles for Service Design

People are the key to service delivery and some basic principles for organizations can help them realize their full potential:

  • Work groups are to be organized so that they match the processes and the competencies required
  • Individual workers will be given sufficient autonomy to make useful decisions
  • Work will take place in a location where it is done with the most efficiency

Information Design Principles for Service Design

Information flow is key to delivering high quality services; if people don’t know what they’re supposed to and when they’re supposed to know it – service suffers. These are simple principles for information design in service design:

  • Data shall be normalized between the organization and its customers and within the organization itself
  • Data shall be easy to transfer and be reusable within the organization and within the partner network
  • Wherever possible data entry shall be avoided and be replaced by data lookup, selection and confirmation utilities instead

Technology Design Principles for Service Design

Technology design principles are used to support the delivery of service. They include:

  • Technology should always be used to enable a service; it should not be the driver of a service.
  • Technology should be pulled into a service design rather than pushed into it.
  • Technology design is to be flexible enough and agile enough to allow fast modification in the face of changing customer requirements

The Take Away

Service design principles support the development of services which deliver high quality experiences to users and customers. Many of these principles are similar to principles already employed in UX design and it should be relatively easy for an experienced UX designer in products to transition to UX design for services.

 

Source: www.interaction-design.org

Posted in Knowledge sharing | Leave a comment

What is Interaction Design?

Interaction design is an important component within the giant umbrella of user experience (UX) design. In this article, we’ll explain what interaction design is, some useful models of interaction design, as well as briefly describe what an interaction designer usually does.

A simple and useful understanding of interaction design

Interaction design can be understood in simple (but not simplified) terms: it is the design of the interaction between users and products. Most often when people talk about interaction design, the products tend to be software products like apps or websites. The goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible.

If this definition sounds broad, that’s because the field is rather broad: the interaction between a user and a product often involves elements like aesthetics, motion, sound, space, and many more. And of course, each of these elements can involve even more specialised fields, like sound design for the crafting of sounds used in user interactions.

As you might already realise, there’s a huge overlap between interaction design and UX design. After all, UX design is about shaping the experience of using a product, and most part of that experience involves some interaction between the user and the product. But UX design is more than interaction design: it also involves user research (finding out who the users are in the first place), creating user personas (why, and under what conditions, would they use the product), performing user testing and usability testing, etc.

The 5 dimensions of interaction design

The 5 dimensions of interaction design(1) is a useful model to understand what interaction design involves. Gillian Crampton Smith, an interaction design academic, first introduced the concept of four dimensions of an interaction design language, to which Kevin Silver, senior interaction designer at IDEXX Laboratories, added the fifth.

1D: Words

Words—especially those used in interactions, like button labels—should be meaningful and simple to understand. They should communicate information to users, but not too much information to overwhelm the user.

2D: Visual representations

This concerns graphical elements like images, typography and icons that users interact with. These usually supplement the words used to communicate information to users.

3D: Physical objects or space

Through what physical objects do users interact with the product? A laptop, with a mouse or touchpad? Or a smartphone, with the user’s fingers? And within what kind of physical space does the user do so? For instance, is the user standing in a crowded train while using the app on a smartphone, or sitting on a desk in the office surfing the website? These all affect the interaction between the user and the product.

4D: Time

While this dimension sounds a little abstract, it mostly refers to media that changes with time (animation, videos, sounds). Motion and sounds play a crucial role in giving visual and audio feedback to users’ interactions. Also of concern is the amount of time a user spends interacting with the product: can users track their progress, or resume their interaction some time later?

5D: Behaviour

This includes the mechanism of a product: how do users perform actions on the website? How do users operate the product? In other words, it’s how the previous dimensions define the interactions of a product. It also includes the reactions—for instance emotional responses or feedback—of users and the product.

Important questions interaction designers ask

How do interaction designers work with the 5 dimensions above to create meaningful interactions? To get an understanding of that, we can look at some important questions interaction designers ask when designing for users, as provided by Usability.gov(2):

  • What can a user do with their mouse, finger, or stylus to directly interact with the interface? This helps us define the possible user interactions with the product.
  • What about the appearance (colour, shape, size, etc.) gives the user a clue about how it may function? This helps us give users clues about what behaviours are possible.
  • Do error messages provide a way for the user to correct the problem or explain why the error occurred? This lets us anticipate and mitigate errors.
  • What feedback does a user get once an action is performed? This allows us to ensure that the system provides feedback in a reasonable time after user actions.
  • Are the interface elements a reasonable size to interact with? Questions like this helps us think strategically about each element used in the product.
  • Are familiar or standard formats used? Standard elements and formats are used to simplify and enhance the learnability of a product.

So what do interaction designers do?

Well, it depends.

For instance, if the company is large enough and has huge resources, it might have separate jobs for UX designers and interaction designers. In a large design team, there might be a UX researcher, an information architect, an interaction designer, and a visual designer, for instance. But for smaller companies and teams, most of the UX design job might be done by 1-2 people, who might or might not have the title of “Interaction Designer”. In any case, here are some of the tasks interaction designers handle in their daily work:

Design strategy

This is concerned with what the goal(s) of a user are, and in turn what interactions are necessary to achieve these goals. Depending on the company, interaction designers might have to conduct user research to find out what the goals of the users are before creating a strategy that translates that into interactions.

Wireframes and prototypes

This again depends on the job description of the company, but most interaction designers are tasked to create wireframes that lay out the interactions in the product. Sometimes, interaction designers might also create interactive prototypes and/or high-fidelity prototypes that look exactly like the actual app or website.

Diving deeper into interaction design

If you’re interested to find out more about interaction design, you can read Interaction Design – brief introby Jonas Lowgren, which is part of our Encyclopedia of Human-Computer Interaction. It provides an authoritative introduction to the field, as well as other references where you can learn more.

 

Source: www.interaction-design.org

Author: Teo Siang

Posted in Knowledge sharing | Leave a comment

7 Key UX Topics that Every Manager Should Understand

The new entrant into UX in an established business often has a tough time of things. People understand what UX stands for (some of the time at least), they may even have an idea of why it is important but they often have no real understanding of what is required to achieve a good UX.

This lack of understanding and particularly from management; leads to conflict with the UX team. This can be avoided, or at least made less painful, if all managers were to understand these 7 critical UX ideas.

User Research is Not Optional

Product managers, customer service managers, marketing managers, development managers, etc. can all feel somewhat threatened when the new UX guy on the block starts talking about talking to their users. This results in defensive displays in meetings where they will argue that they talk to the users and customers all the time and thus – you don’t need to.

Perhaps the easiest way to overcome this issue is to explain the purpose of user research and one of the outputs – user personas. Show how existing research cannot build these pictures accurately and that the benefit of user research is better understanding of users so that the whole business can align on user objectives. Show how existing research can complement this picture and you should slowly starting winning people round to your way of thinking.

Is Not a Single Process

Big business, in particular, has become very process focused over the last few years. The introduction of quality management like Lean, Six Sigma and TQM has driven that. This often leads to senior figures demanding UX processes from their UX team. They want a nice consistent approach that they can then measure on each and every project to track some awesome numbers for their spreadsheets.

You need to show that UX is flexible. That each project is unique and that you may need to develop a unique process for each project to reflect that. Part of your process is selecting the right tools for the job, an iteration of a project may follow a very different UX path from the one chose for a brand new product.

UI Is a Part Of UX But Not the Whole of It

There is often an assumption that UX design is solely concerned with screen flow, buttons and other inputs. Yet, as any good UX designer can tell you, that’s only part of the job. That doesn’t mean that UI is not important (far from it) but it does mean that UX is going to be involved with other areas too.

Talk about the internet of things and how in a few years there may be no screens associated with a product at all. Talk about how UX can help with business process and product process development (things for which there are no screens in the here and now). Talk about the UX of content and why it matters. In essence, show the range of UX and show why it matters.

Usability Tests Matter

In business people tend to have faith in expertise. It’s good because that’s what got you your job – you were seen as an expert in UX. Unfortunately, that faith can be expressed in a resistance to your conducting user testing.

After all, if you’re the expert and you did the design work, surely that’s enough? If you do know what you’re doing – there’s no need to test is there?

This is really about explaining checks and balances. Yes, you are the expert but experts make mistakes too. If Coca-Cola had taken a few steps back to conduct in depth checks on their customers – they’d have realized that New Coke was maybe not such a good idea. It is the results of usability testing that enable you to decide whether investing in product development is worth the effort.

Usability Is Also a Part Of UX But Not the Whole of It

Another area where it’s easy to find UX pigeon-holed is as the “usability people”. Yes, usability is a vital part of what we do but once again, it’s not the whole of what we do.

It can be best to show examples of where usability, think the Sinclair C5 or the Betamax video, didn’t make a jot’s worth of difference to the final success of the product. Just because something is easy to use – it doesn’t mean that there’s a market for that product. It’s the overall experience of that product in context that matters.

Takes Time and Is Iterative

How can it take that long? What do you mean the product won’t be perfect at this release? The investment in UX from a business perspective is a good thing but there’s a tendency to assume 100% immediate returns on investment. The UX professional knows this isn’t likely but the management team doesn’t.

This is really about explaining the process in more detail. That initial insights require time to be refined to produce the best User Experience and that requires prototypes, wireframes, testing, etc. In the longer term it’s about understanding that nearly every experience can be improved, even if the experience is excellent at the time of release. Most businesses live by that mantra anyway so it shouldn’t be too tough a sell.

 

UX Requires Many Hats

The instinct to save on the staff bill should never be under-estimated. When recruiting for a UX team there’s a tendency for other managers to expect one person to be an ethnographer, a UX researcher, a UX designer, a usability engineer, etc.

You need to be able to show that while multi-skilled professionals do exist that they are rare. You also need to be able to show that even if you could find these wondrous people – there’s a limit to how much work one person can do anyway. UX is not normally a one man job even if it would be cheaper that way.

Summary

These 7 ideas should help managers better understand what can and can’t be achieved through the UX team. It’s not that they’re not already on your side (you already have a job don’t you?) but it’s just that they don’t really know much about UX yet – it’s your job to help educate them.

 

Source : www.interaction-design.org

 

Posted in Knowledge sharing | Leave a comment

Accessibility before Aesthetics

It’s time we start addressing accessibility before aesthetics in our design processes to create meaningful products for our diversified societies and cultures. Before diving into the Why, How and What of it, let’s revisit the definitions of these terms to set the context.

Accessibility

As the definition goes, it’s simply the quality of being able to be reached or entered. In terms of Design, it however refers to the characteristic that products, services, and facilities can be independently used by people with a variety of disabilities.

Aesthetics

As the definition goes, it’s a branch of philosophy which deals with questions of beauty and artistic taste. While it is mainly relates to the study of sensory values, in Design it’s about the visual attractiveness of a product.

As stated in Interaction Design Foundation here, studies have proved that creating good aesthetics in a product leads to better usability and user experience which is further catalyzed by references in Don Norman’s Emotional Design: Why We Love (or Hate) Everyday Things, that visually appealing websites are rated as more usable than they actually are, because their attractiveness evokes pleasant emotions in users.

Let’s see how Aesthetics work in design today. It has grown into a common belief that usability of a product is often defined by the attractiveness, i.e., the aesthetic appeal of the design. It’s a general belief that their attractiveness provides a sense of pleasure to the user’s mind and that will surely increase downloads, active users, reduce the drop off rates, reach a larger user-base. I’m sure many would agree that it happens to the best of us: we open any new product, new mobile app, new website, a sleek animation on dribbble, any design project, which is beautifully designed (aesthetically), crafted and presented, we go through the entire content to realize whether we missed out on something or did we really understand the purpose behind the product, though it visually appealed a lot. If one refers to Don Norman’s three layers of designVisceral Design level plays an integral role in this context, which more or less explains the belief that aesthetics enhance the UX of the product but it surely lacks on the other two layers (Behavioral & Reflective Design). In a way,

Let’s talk about the elephant in the room, Accessibility. In alignment to the idea of Accessible Design, there’s another concept which apparently is bigger and arduous today, is Inclusive Design; but how does it differ?

Well, Inclusive Design, as the understanding goes, is like an environment which can be accessed and used by as many people as possible, irrespective of their age, gender, location, disabilities and other differential factors. So naturally, accessibility is a core subset of inclusive design and means much more. Nowadays, as more and more organizations are addressing the 1 Million+ Users, Next Billion Users, we often come across the idea of Design for All, which in simple sense is an ideal state. The amount of diversity we witness among our users in the society, it is surely an ideal scenario, if not impossible, where one design solution fits all. But it also signifies that we must work towards it, the more we address these diversified aspects, the better we create. While it is potentially fruitful for both users and businesses, designing for as many users as possible is indeed a daunting prospect .

Our products today, as they aim to reach more and more users, have to be designed with more inclusion for the businesses to sustain in this competitive market. People nowadays tend to focus more on aesthetics of a product expecting usability to be default but often usability aspects are lost or compromised in the process. An aesthetically brilliant product might only address a small set of users because good aesthetics demand more and more criteria like for visual aesthetics, it ranges from color, shape, pattern, texture, hierarchy, balance, scale, line, proximity and movement. Naturally, more the filters, smaller the user group, and addressing this challenge of finding more inclusivity and accessibility in our design process is the need of the hour.

How can we address Inclusive Design?

There is an endless range of things which can be addressed to attain inclusiveness in design and believably it can be retrieved through our standard design thinking methods of ethnographic study, empathy, user research, usability analysis. But let’s start with some of the distinct ones; first up the King of Aesthetics: Color.

• Color

As designers, it seems odd to consider a scenario that not everyone sees color in the same way, or even at all. Color Vision Deficiency (CVD), commonly known as Color Blindness is among one of the most common and widespread disabilities in the world, which we don’t easily accept or address in our day-to-day living, unless critical. A reported 50 million cases exist in India with 9% of world population suffering from this, often inherited, incurable disability. Putting a billion users in perspective, the user-base is humongous.

One way of addressing color while designing for inclusion is the concept of Color ContrastWCAG guidelines say that a contrast ratio of 4.5:1 between foreground and background color is required to suffice accessibility index. There are various tools across the internet which helps one select a color palette. To list a few common ones: WebAIM Color Contrast Checker , WCAG Contrast Checker. In the below image, all the 10 text blocks might appear legitimate to most of us, but the five blocks on the left are surprisingly NOTaccessible by WCAG standards .

• Shape

Shapes work wonders where color fails. Using shapes as visual cues to show various states of the product is significant for accessibility, and when complemented with color, can be a great combination to address accessibility with aesthetics. The application of solid and hollow icons to show two states of any action button is being widely adopted today which is a great way of making our products more inclusive. The image below is one great example of how any product can use the concept of simple shapes and play only with strokes of a neutral color to communicate so much.

• Labels

Designing an icon which clearly communicates the action in itself is a challenging task and when your product has some unfamiliar actions, which users aren’t expected to know, it becomes an even bigger challenge to communicate. An assistive method of using text labels with icons for any action button, or wherever applicable, caters to our non-literate users and the ones with cognitive disabilities. Usage of text labels can also apply to form fields where a labelled textbox speaks more than a blank one.

The image below is a representation of how accessibility is being addressed in a bottom navigation bar. It reflects how these old, new, big, small platforms are using the concepts of color, shape, and labels, to achieve certain levels of inclusivity. The index here can be put to a scale of least accessible (red circle) to fairly accessible (amber square) to most accessible (green triangle). Obviously, aesthetics are then integral as well with some probable trade offs.

• Multilingual Support

Companies today are building products for larger audiences spread across borders and cultures. Understandably, to reach out to more and more users, the products must relate to those users’ needs. Considering the Indian stretch, where attire, food, language, and culture alters every 400 km, it becomes immensely critical that our products cater to users of different regions and languages. Multilingual support in applications is amongst one of the primary requirements for a user today. Once that aspect is considered, then it brings in the aesthetic challenges of font families, font weights, font legibility, linguistic accuracy. The image below shows how some applications, especially serving in the public domain for universal payments, map navigation, easy media content, have prioritized multilingual support for reaching out to more users.

• Situational Optimization

Our products are today used under different circumstances, different environments, different restrictions, which challenge the accessibility of these products. Google’s Android Auto is a great example how an entire device optimizes to a Drive Mode, carefully restricting functionalities but without compromising on the experience with a drastically different set of design guidelines. It is actually helping a lot of players in this domain to learn and improvise their own products. Voice Command is another way of enabling accessibility in situations when the users are often left paralyzed or disabled with basic interactive modes.

• Gender Neutrality

While working in the field of automotive UX, we realized that most of our products haven’t really been addressing women drivers, primarily because the number of women drivers are quite less but that’s what inclusive design is all about, looking at the excluded. Another great example is the dating app Bumble’s challenge towards outdated heterosexual norms by empowering women to make the first move and ensuring safe communications. Gender Neutrality is indeed a big challenge in the society and addressing exclusions in design might prove useful.

• Product Scalability

Responsive Design has long been an established concept. With Mobile Onlytrends catching up in the industry, the concept of Progressive Web Apps has also grown many folds. Also, people nowadays have access to multiple devices with various aspect ratios, dimensions, across wide budget ranges. While most products are available across platforms/devices by default, they aren’t optimized enough to scale accordingly to maintain a consistent user experience. To improve on inclusion of more users, our products must seamlessly scale across platforms/devices, a requirement which also extends to technical stakeholders. Another aspect of scalability is functioning under irregular network speeds or offline modes. Evidently, network coverage is often very sluggish, and/or unreliable in parts of the emerging world which puts our product accessibility into challenge.

The image below are a few examples of how companies are addressing offline accessibility for their services assuring users continue to function without any dependency on network connectivity.

The no. of ways we can address inclusivity in design is relentless and these are just a few ways of how we can start redefining our products and services for more and more people. Like aforementioned, ironically, one valid approach of addressing Inclusive Design can be to start with Exclusioni.e., by trying to understand which users are being excluded from reaching or using our products. While accessibility needs to be a priority, on the other hand, the value of aesthetics can’t be undermined as well in our products. With the King of Aesthetics: Color potentially taking a backseat, aesthetics of the product ought to take a blow or find better trade offs to maintain the visual appeal.

Today, it might seem like a major alteration in our thinking process and design approach but as we learn more about it, accessibility and inclusive designshould become the default rather being the elephant in the room creating a hullabaloo. But the more we empathize and understand these larger user groups, unlearning many established conventions of design, the more challenging it will get to design a solution, and that’s what promises to impact our products for the next billion users more than aesthetics alone.

Thanks for reading about the impact of inclusive design and aesthetics in our design process. Feel free to share it, share your views, feedback and more great examples on how we are addressing inclusive design practices in our products so that we can further learn and implement. There are some great content on Inclusive Design practices across MicrosoftGoogle and other major players of the industry.

Author: Arijit

Source: uxplanet.org

Posted in Knowledge sharing, Uncategorized | Leave a comment

Tools & Apps for Testing Your Responsive Design

It’s never been more important to ensure your design is ready for every type of user—and device—before launch. While it can be tough to physically test on every device, there are some tools and apps to help you replicate a variety of responsive scenarios.

With free and premium tool options, there’s no reason not to test your responsive design before deployment. Just make sure to use that information to many necessary design adjustments! Today we’re running you through a selection of tools for testing a responsive design.

1. Google Mobile-Friendly Test

Google Mobile-Friendly Test is one of those go-to tools that somehow gets overlooked. You need your website design to pass Google’s standards to help with search visibility; it’s that simple.

Use is easy, just type in a URL and see how your page scores on mobile devices. The best part of this tool is that it pinpoints where your website might be slowing down or not rendering well on mobile so that you can make the fixes.

2. Responsinator

Responsinator allows you to see your website design in a number of different device environments. (This is a great way to replicate devices without having a stack of phones in a drawer somewhere.)

The best part about this site is that new devices are added quickly and each actually lets you scroll so that you see an entire page, not just what appears above the scroll. Devices are offered in portrait and landscape view as well. Plus, each device preview is labeled so you know exactly what you are looking at and where issues might lurk.

3. Responsive Design Checker

Responsive Design Checker puts your website into a window where you can manually adjust sizes – great for checking breakpoints – and see different device orientations.

Where this tool excels is that it shows desktop sizes as well as mobile and tablet devices. (Some of the other tools really put the emphasis on mobile and not larger screens.)

What’s nice about it is that you can see different sizes without changing the size of your browser. Another nifty use for this tool? Use it to grab screenshots for mockups.

4. XRespond

XRespond lets you compare multiple versions of your site on different devices simultaneously. The beauty of this tool is that you can figure out how consistent of a user experience you are providing from one device to another. (Users expect websites to be the same wherever they access them.)

Test the design in landscape or portrait view and choose devices by the same maker – such as Apple or Samsung – or compare across a variety of devices at similar sizes. The one downside to this tool is that it doesn’t include all of the newest devices, although many of the most popular models are listed.

5. Screenfly

Screenfly has some nice tools, such as sharing, so that you can work as a team to test and view a responsive design. It includes more device types than some other tools as well – desktop computers, phones, tablets, televisions and the ability to add any custom screen size you want.

Tools allow you to rotate, scroll and more with simple click buttons at the top and everything works right in-browser.

6. LambdaTest

LambdaTest is one of the more robust tools in this list. It includes the ability to test on more than 2,000 real browsers and operating systems.

This tool is more than just seeing what your website will look like, it tests for compatibility, user experience, pixel perfection, and more in a live environment. It tests on multiple devices, browsers and versions of browsers so you’ll know exactly how your website works.

You can get screenshots of how it all looks and even collaborate with the tool (and team) online. Plus, the bonus of a premium tool such as this is that it includes debugging features to help you solve design problems as they arise.

7. Responsive Design Illustrated

Responsive Design Illustrated is more of a planning tool than testing tool. Consider this beginner option something that you can use to help visualize aspect ratios and how to plan design elements for different device and screen sizes.

You do it all right in the browser, so you can visually explore how to think about the design at different sizes.

8. Responsive Web Design Testing Tool

The Responsive Web Design Testing Tool is a simple URL-based viewer that lets you compare devices by size or device type.

What’s nice about this tool are the toggle options to see different orientations, lengths or views with just a click. If you want to host this tool for testing in your own environment, that’s an option too. (So, you can test before a site goes live.)

The developer of the tool, Matt Kersley, has made it available on Github.

9. Designmodo Responsive Test

The Designmodo Responsive Test might be one of the best-looking tools to test your website design. It includes plenty of easy toggles, loads of device options and a clean interface as a viewing environment.

Users can also add custom dimensions and view in different orientations. It’s updated often with new devices so you can test easily.

10. CrossBrowserTesting

CrossBrowserTesting is a premium tool that offers manual and automated testing. Users can run manual, visual and Selenium tests in the cloud on more than 1,500 real desktop and mobile browsers.

The tool is highly scalable – even for enterprise-level operations. It’s simple to deploy, includes debugging tools, works on a number of browsers, versions, and devices and has a robust test configuration so that you can find problems in the test before they become big issues.

Conclusion

Do you have a favorite tool that’s not on this list? Share it with us. We love to see tools that we didn’t know about.

As with any website design and development tool, it’s a good idea to play with a couple of options before settling on just one thing. Most of these tools can help you figure out if your design is working, but all work in slightly different ways and have different levels of user control. Play around and find the one that’s most comfortable for you.

 

Source: designshack.net

Author: Carrie Cousins

Posted in Knowledge sharing | Tagged | Leave a comment

Product metrics prioritization

In the Choosing the relevant product metrics (Part 1), we reviewed product metrics classification to distinguish performance and user experience as well as a fundamental approach building a metrics map which is aligned with business and team.

More growth and more experiments result in more metrics to follow. It is crucial to prioritize metrics and stay focused on the most important things especially when our creativity goes wild.

Priority 1 metrics

These are the highest priority metrics. Priority 1 metrics are the product growth main indicators. Though, with the pace of growth influencing key metrics is getting more difficult. When a product is new, such indicators can grow rapidly. It is essential to keep an eye on the highest priority metrics, but it makes no sense to expect their constant growth.

Priority 2 metrics

These are critical metrics but mainly reflect user experience. Priority 2 metrics not directly relate to product KPIs, but can have a substantial impact. Influencing priority 2 metrics is easier than the highest priority, but still challenging.

Priority 3 metrics

Priority 3 and below metrics can be classified as “micro metrics”. These metrics also describe user experience and behavior, but the product shouldn’t be too sensitive to the metrics fluctuations. These metrics are especially helpful in validating A/B tests which didn’t affect priority 1 and 2 metrics. The more micro metrics, the better. Though, every micro metric should be directly or indirectly, related to priority 2 metrics.

In conclusion, I’d like to say that metrics map is a versioned document. Product changes and experimentations is an ongoing process, and the metrics must evolve together with the product. As you can see there is no magic trick behind the metric prioritization, but rather simple logic. Although metric prioritization helps us to stay focused while being creatively pushing the product limits.

Source: awsmd.com

Author: Stan Nevedomsky

Posted in Knowledge sharing | Leave a comment

7 Key UX Topics that Every Manager Should Understand

The new entrant into UX in an established business often has a tough time of things. People understand what UX stands for (some of the time at least), they may even have an idea of why it is important but they often have no real understanding of what is required to achieve a good UX.

This lack of understanding and particularly from management; leads to conflict with the UX team. This can be avoided, or at least made less painful, if all managers were to understand these 7 critical UX ideas.

User Research is Not Optional

Product managers, customer service managers, marketing managers, development managers, etc. can all feel somewhat threatened when the new UX guy on the block starts talking about talking to their users. This results in defensive displays in meetings where they will argue that they talk to the users and customers all the time and thus – you don’t need to.

Perhaps the easiest way to overcome this issue is to explain the purpose of user research and one of the outputs – user personas. Show how existing research cannot build these pictures accurately and that the benefit of user research is better understanding of users so that the whole business can align on user objectives. Show how existing research can complement this picture and you should slowly starting winning people round to your way of thinking.

Is Not a Single Process

Big business, in particular, has become very process focused over the last few years. The introduction of quality management like Lean, Six Sigma and TQM has driven that. This often leads to senior figures demanding UX processes from their UX team. They want a nice consistent approach that they can then measure on each and every project to track some awesome numbers for their spreadsheets.

You need to show that UX is flexible. That each project is unique and that you may need to develop a unique process for each project to reflect that. Part of your process is selecting the right tools for the job, an iteration of a project may follow a very different UX path from the one chose for a brand new product.

UI Is a Part Of UX But Not the Whole of It

There is often an assumption that UX design is solely concerned with screen flow, buttons and other inputs. Yet, as any good UX designer can tell you, that’s only part of the job. That doesn’t mean that UI is not important (far from it) but it does mean that UX is going to be involved with other areas too.

Talk about the internet of things and how in a few years there may be no screens associated with a product at all. Talk about how UX can help with business process and product process development (things for which there are no screens in the here and now). Talk about the UX of content and why it matters. In essence, show the range of UX and show why it matters.

Usability Tests Matter

In business people tend to have faith in expertise. It’s good because that’s what got you your job – you were seen as an expert in UX. Unfortunately, that faith can be expressed in a resistance to your conducting user testing.

After all, if you’re the expert and you did the design work, surely that’s enough? If you do know what you’re doing – there’s no need to test is there?

This is really about explaining checks and balances. Yes, you are the expert but experts make mistakes too. If Coca-Cola had taken a few steps back to conduct in depth checks on their customers – they’d have realized that New Coke was maybe not such a good idea. It is the results of usability testing that enable you to decide whether investing in product development is worth the effort.

Usability Is Also a Part Of UX But Not the Whole of It

Another area where it’s easy to find UX pigeon-holed is as the “usability people”. Yes, usability is a vital part of what we do but once again, it’s not the whole of what we do.

It can be best to show examples of where usability, think the Sinclair C5 or the Betamax video, didn’t make a jot’s worth of difference to the final success of the product. Just because something is easy to use – it doesn’t mean that there’s a market for that product. It’s the overall experience of that product in context that matters.

Takes Time and Is Iterative

How can it take that long? What do you mean the product won’t be perfect at this release? The investment in UX from a business perspective is a good thing but there’s a tendency to assume 100% immediate returns on investment. The UX professional knows this isn’t likely but the management team doesn’t.

This is really about explaining the process in more detail. That initial insights require time to be refined to produce the best User Experience and that requires prototypes, wireframes, testing, etc. In the longer term it’s about understanding that nearly every experience can be improved, even if the experience is excellent at the time of release. Most businesses live by that mantra anyway so it shouldn’t be too tough a sell.

UX Requires Many Hats

The instinct to save on the staff bill should never be under-estimated. When recruiting for a UX team there’s a tendency for other managers to expect one person to be an ethnographer, a UX researcher, a UX designer, a usability engineer, etc.

You need to be able to show that while multi-skilled professionals do exist that they are rare. You also need to be able to show that even if you could find these wondrous people – there’s a limit to how much work one person can do anyway. UX is not normally a one man job even if it would be cheaper that way.

Summary

These 7 ideas should help managers better understand what can and can’t be achieved through the UX team. It’s not that they’re not already on your side (you already have a job don’t you?) but it’s just that they don’t really know much about UX yet – it’s your job to help educate them.

 

Source: www.interaction-design.org

Posted in Knowledge sharing | Leave a comment

The Grid System: Building a Solid Design Layout

Now that we’ve seen some grids at work in the Rule of Thirds article, let’s examine them a little more deeply. As a concept that deals so fundamentally with the fabric and background of our work as designers, it’s easy to overlook the power of grids and think more about the elements we want to create. Many traditional artists still paint their masterpieces over a feint series of intersecting lines. To help us make the most of our work surfaces and create with precision, we designers have a tool that echoes this. We call it the Grid System.

The Story of the Grid

One of the easiest ways to achieve an organized design is to apply a grid system. It’s a tried and tested technique that first found favor in print layout. Low-tech and cheap, this is a great resource for you as a designer – consider it a top-ten tool in your office. Grids in interactive design can also help provide a consistent experience across multiple devices with different screen sizes. Users are happy when they see familiar features laid out as they would expect to find them.

The grid system helps align page elements based on sequenced columns and rows. We use this column-based structure to place text, images, and functions in a consistent way throughout the design. Every element has its place that we can see instantly and reproduce elsewhere. Consider the grids we find in maps. Islands, towns, lakes will appear on an exact part of a map, on a set of North-South/East-West coordinates. They will always appear in the same place on other maps. A GPS accesses these coordinates to help guide us; imagine the chaos if there were no grid system for it to latch on to and keep us right on the road!

The grid system was first used to arrange handwriting on paper and then in publishing to organize the layout of printed pages. Given that the printed page and the virtual page have much in common,it should come as no surprise that we also use it in web and app design. Creating a grid system for the virtual page is a little more complex than for the physical page – browsers handle information differently, and screens vary in size.Happily, however, the principle remains the same.

That’s not to say that there’s no resistance to using the grid system. Some designers feel that the grid limits creativity. While this may be true, it’s important to recognize that many designers employ the grid system regularly because it is so effective at organizing information.

The best layout is one which provides no distraction from the content. Thanks to its mathematical precision, the grid system is a great example of this kind of layout.

Grid as a Design Principle

Villard De Honnecourt, a 13th-century French artist, merged the grid system with the golden ratio to produce printed page layouts with margins based on fixed ratios. That methodology continues to the present day, as the majority of printed books and magazines prove. Publishers, editors and designers place so much effort on keeping the tradition, not only because it’s known to be the best way but for another large reason. The readers (i.e., the users) expect to find everything in its proper place. Remember, the human eye is drawn to elements; it is also easily upset if it is confused or made to work out a problem it was not expecting to encounter.

 

Let’s try a quick experiment to see just how effective a grid can be. If you have two blank sheets of paper handy, draw about four or five shapes at random on one of them. Don’t worry about neatness and geometry – it’s just a simple illustration. When you’re finished, try to copy them as they appear on the second blank page (please don’t “cheat” by putting the second page under the first and drawing over the shapes again to trace them). Even if you have a very sharp eye and sure hand, you’ll notice that it’s practically impossible to replicate the first design, with everything appearing in the same place.

The second part of this experiment is optional, but it will help to drive home the point. If you have squared or graph paper lying around, take two pages and repeat the procedure. Do you notice how copying your original is so much easier when you can guide your hand? The grid made by the intersecting lines of this special paper gives us the gift of making truly accurate copies. By training our eye on the number of columns across and rows down, we can duplicate in free hand almost as perfectly as a photocopier.

The image at the top of our article illustrates the components of the printed page: a header, footer, as well as right and left margins. Inside the margins, a designer has created equal-sized columns with a space between them, known as a gutter. Knowing that the page can include one or more columns, the designer can place elements such as images and text within these columns to provide alignment with the rest of the content. The image and paragraph areas may overlap in one or more columns.

Similar to the way in which vertical grid lines create these useful columns, horizontal grid lines guide the height of elements in the design. These portions of the grid are known as rows. As designers, we want to make the height of each row as a proportion of the width of the columns. For example, the ratio of column width to row height is 3:2, 4:3, etc.

Notice how we arrange the rows equally within the page layout, and how we insert gutter space between each row. We can then place elements of the page content in one or more rows, as shown in the figure at the top.

Grids in Interactive Design

In the digital world, the grid system acts similarly to the print layout in organizing the elements on the page. Additionally, it provides a guide for designers to create multiple layouts that support responsive themes for different screen sizes.

We divide the web page layout into columns that we separate with margins, using whitespace, between them. The width of the columns and the margins are equal, and we can place content in one or more columns based on the layout of the design.

The application of a grid means that the design can be divided into multiple columns that can help designers organize content. For example,we can have one, two, three, six, twelve, or more columns. Today’s screen resolutions reach very large sizes compared with what was available in the early days of computers. Even so, using a 960-pixel width can ensure that the design is properly displayed on many computer screens. It can also help designers modify the layout for mobile devices.

The examples above show grid systems that are based on the 960-pixel resolution from http://960.gs, which provides a useful guide for building your own grid-based web layouts.

There are other helpful tools for building grid layouts available online, too:

  • http://1200px.com/1200px: This website helps you build a grid system for much wider website designs than the 960-pixel style.
  • Golden Grid System: This website can help you build a grid system and optimize it for mobile-responsive display.

If you want to explore further grid systems for different purposes, you can find some at the following websites:

The Take Away

The Grid System has been helping artists of all types (including writers) for a long time. First utilized by a 13th-Century artist, who merged it with the golden ratio, the grid system has been a tried, tested, and trusted methodology for centuries. It firstly empowered writers to position their handwriting neatly on paper; later on, it became a universal standard in the publishing industry. Publishing houses everywhere retain strict observance of the grid system in producing copy that users find both pleasing to the eye and in line with what they would expect to see.

Regarding setting out elements, grids afford superb precision. We can see this principle most prominently in maps, noting how locations are pinpointed with grid lines that represent coordinates. The pursuit of accurate cartography would enable navigators to discover new places in the great unknown parts of the world. Now, with the grid lines that mark both longitude and latitude, GPS devices allow us to get wherever we wish to go.

However, cartographer’s maps represent fixed “designs” that change only imperceptibly over many years. Cartography might be a science, but grids, with their mathematical precision, are brilliant and much-needed tools of artists, too. Throughout history, artists have been making use of grid lines to plan and paint images of their own, which capture the best, most pleasing proportions.

Easy to create and practically free of charge, grids also give us web and app designers the ability to lay out our work in an organized and precise manner. By enabling us to insert elements in boxes created by their intersecting lines, grids enable us to make a consistent user experience across multiple devices. For example, the dimensions and layouts of our computer and smartphone screens differ. Planning our work so that it can adjust to appear on different platforms keeps our designs intact, in proportion and in the places where our user expects to find them.

Designers use columns and rows, shaped according to set column width and row height proportions (such as 3:2 or 4:3), and gutters (the spaces between these “boxes”) to present elements of our designs in the best way.

Although we have the luxury of very high screen resolutions that allow us to show ever-more impressive and realistic designs, by using a grid based on a width of 960 pixels, we can make sure that our designs will translate properly to be displayed on many computer screens and mobile devices such as cell phones. However, we have a wealth of resources at our disposal to help us fine-tune our choice of grid system to match the design we want.

However you use the grid system to build your design, you should keep in mind other principles, such as the Golden Ratio. Aiming to create a consistent user experience also involves creating a pleasing user experience that will be consistent across many devices. If you keep in mind that your choices will be working in concert with the known tendencies of the user’s eye, you will be able to create eye-catching designs that are better organized, as seen by your users on computer, tablet, or cell phone screens.

 

Source: www.interaction-design.org

Author: Mads Soegaard

Posted in Knowledge sharing | Leave a comment

5 TRENDS OF VOICE UI DESIGN

At its core, the concept of interaction was always about communication. Human-Computer Interaction has never been about graphical user interfaces, which is why Voice User Interfaces (VUIs) are the future of user interface design.

An interface is just a medium people use to interact with a system—whether it’s a GUI, VUI or something else. So Why is VUI So Important? Two reasons:

Firstly, conversational interfaces are so fascinating because conversation is a form of communication everyone understands.

  1. It’s a natural means of interaction. People associate voice communication with other people rather than with technology.
  2. Users don’t need to learn to interpret any symbology or new terminology (the language of GUI), they can use English (or any other native language) to operate with a system. It doesn’t mean that users don’t have to learn how to use a system but the learning curve be reduced significantly.

Secondly, user expectations are changing. According to Statista, 39% of millennials use voice search. This audience is ready to be the early adopters of VUI systems.

Top 5 VUI Trends

When it comes to designing VUI, voice interaction represents the biggest UX challenge for designers since the birth of the original iPhone. But the great news is that the most fundamental principles of UI design that we use when creating products with GUI are still applicable to VUI design. Below you can find a few trends that will shape VUI design in next decades.

1. VUI THAT BUILDS TRUST

Trust helps to build a bridge between a person and a machine. If trust is absent, users will be unlikely to interact with a particular voice user interface.

The importance of the valid outcome (VUI should give the person understanding that s/he will receive exactly what s/he requested). It’s possible to achieve this goal by focusing on the following things:

  • Improving the accuracy of speech recognition (more sophisticated NLP algorithms).
  • Focusing on understanding the user’s intent (a reason for interacting in the first place). When users interact with a system, they have a particular problem they want to solve, and the goal of the designer is to understand what this problem is.
  • Providing meaningful error messages.
  • Crafting contextually driven flows. While it’s impossible to predict all commands that users might ask the system, designers need to at least design a user flow that is contextually driven. The system should anticipate users’ intent at each point of a conversation and provide users with information on what they can do next. For example, finding a restaurant near the user. When users search for a restaurant, the system should match exactly what the user is looking for.

The importance of user control (one of the 10 Usability Heuristics for User Interface Designby Jakob Nielsen is still applicable to VUI design).

  • The system should consider the natural limitations of a human brain (short-term memory limitations). The information provided by the system should be overwhelming. When people hear the system response, most users remember only the last phrase. Thus, it’s better to stay away from long phrases or providing a dozen different options while the user can remember just a couple of them at one time.
  • The system should react to a user request with appropriate feedback. This feedback should give users a full understanding of what the system is doing right now. For example, visual feedback lets the user know that the system is ready and listening; or in POD (Process of Doing). When a user sends a request to the system, the system shows a POD. POD isn’t a loading animation, it doesn’t just state the fact that users have to wait while a system is doing something, it provides valuable information of what the system does. For example, a POD for a command on pulling out a file from Dropbox might look like as someone search for a right file in storage.

2. ADAPTIVE USER INTERFACE

An adaptive user interface (also known as AUI) is a user interface (UI) which adapts to the needs of the user or context. VUI of the future will adapt for users — the system will analyze all information it has about users (including the information about current mental state and health condition) and their current context to provide more relevant responses to user requests.

For example, if a user has a high blood pressure at the current moment and decides to set a meeting in 2 hours, a digital assistant might suggest avoiding that, or suggest lowering blood pressure with exercise before the meeting starts.

3. VUI THAT CONVEYS PERSONALITY

Visual designers have a lot of options to introduce the personality in graphical user interfaces – fonts, color, illustration, motion, just to name a few. But what about VUI? Designers can convey personality using language itself — by playing with words, voice, and tone. Speaking of voice, a voice is part of the persona and it shapes its identity. Once we’ve associated a voice with something, it becomes part of its identity. And we experience emotions when we interact with such an interface, just like we when we interact with real people. People want human-understandable voices — not a voice that sounds human, but a voice that speaks coherently human!

Bad example: Siri voice by Susan Bennett – the voice that sounds almost human but people still know that it’s a machine. You can’t really have a dialogue with Siri. While you can ask Siri something like, “What is the weather like today?” You can’t ask more sophisticated questions such as, “What should I wear today?” As a result, you don’t have deep feelings for Siri, you know it’s just a robot.

Good example: Samantha voice from the film Her — the voice that sounds coherently human and people can be in love with it.

4. FROM NARROW AI TOWARDS GENERAL INTELLIGENCE

Human-computer interactions are shifting to conversation, but users expect more. Most of AI systems available today are still limited to Narrow AI — such systems use Machine Learning to solve a clearly defined (and, in most cases, way too narrow) problem. Narrow AIs have zero knowledge outside of their training data. It means that when a user wants to solve a slightly different problem, or the problem itself evolves, the system won’t be able to solve it and it’ll respond with something like, “I don’t understand.” So that you, as a user, face a wall.

In comparison to Narrow AI, General Intelligence is not limited to narrow domains. The concept of learning is at the foundation of GI systems — the fundamental difference between Narrow AI and General AI is that the General Intelligence systems learn without being expressly programmed (machines learn by themselves). GI system uses two types of learning — reinforcement learning (when a system uses all available information to solve a particular user problem) and supervised learning (when a system needs user assistance to solve a problem for the first time). Another difference is that a General AI system can learn to utilize other AI for general and specific purposes. As a result, different Machine Learning models can be trained dependently and work cooperatively. An advanced NLP GI system is able to learn from the first attempt by combining and processing information from multiple different data sources.

5. IMPACT ON SOCIETY

Widespread acceptance of VUI systems. Improving the quality of VUI AI-based systems will lead to better user engagement. The relationships between human and computer will be interactive and collaborative — people and computers will work together. This will impact society — just imagine that in ten years, you’ll walk into the house and just talk and control all kinds of machines.

This future will be with omnipresent AI: As users, we’ll trust AI even with the most important decisions such as “What school should I choose for my children?” VUI will improve the quality of life of older people and people with disabilities.

Conclusion

“The best interface is no interface“ is a famous quote of Golden Krishna, the author of the book The Best Interface Is No Interface. He and many other designers believe that people don’t want more time with screens, in fact they want less. Thus, technology should stop celebrating screen-based solutions. And it’ll happen relatively soon — the interactions of the future won’t be made of buttons.

With the rise of computer processing power, we’ll have more systems that will be able to calculate up to 1000 steps in 1 second. A user and a machine will work together, enabling General Intelligence.

 

Source: www.webdesignerdepot.com

Author: Gleb Kuznetsov

Posted in Knowledge sharing | Tagged | Leave a comment

UX Design For FinTech: 4 Things To Remember

Should you happen to ask your average UX designer to rank their favourite kinds of projects to work on, ‘digital financial services platform’ would probably not land in the top five. Perhaps, not even the top twenty, or even the top fifty.

Most designers do not get particularly excited about studying federal banking regulations or accounting for the complex bureaucracy that often accompanies fintech platforms. When you take a group of creatives and force them to learn about the minutiae of compliance standards or the intricacies of tax audits, you start to see their eyes glaze over.

Not only fintech is unglamorous, but it can also be challenging to design for. Project requirements are often meticulously detailed and riddled with industry jargon, and designers must strike a precarious balance between effortless usability and ensuring an errant tap does not leave the user in financial ruin.

So while designing for fintech may seem impossible or uninspiring, remember to think of it as a challenge, not an obstacle, and try to keep these four other tips in mind as well.

1. Factor In The Future

While generally good practice for any platform you are creating, factoring in the future is imperative when designing for fintech, primarily because the industry is in a near-constant state of flux.

We are in the midst of a digital revolution in the banking and investment sectors as they attempt to catch up to other, much more rapidly modernising spaces. Banks, credit unions, and financial institutions experience fast, and sometimes volatile change as their relationships to one another are reshaped by new technology.

What does this mean for your design? At a high-level, it means leaving ample room for future changes. A recent example: when the US government restructured its NAFTA deal, new tariffs were placed on specific items shipped between the U.S. Canada. This had significant complications for a project I had been working on. We needed new logic for tariffed items and even had to tweak the design to better explain and display the added cost to the buyer.

Granted, this was an eCommerce example – not precisely fintech. However, the principle is the same, and financial regulatory laws can get much more complicated than a simple tariff. Remember to stay up to date on the regulations relevant to the experience you are designing, and consider factoring in potential future changes as well.

2. Remember The Power Of Friction

Earlier this year, as part of Codal’s UX Case Study series with Usability Geek, I analysed the interface and user experience of the robo-investor Acorns, a popular fintech app. There is a lot to like about Acorns from a usability perspective, but one of their savvier design choices was intentionally making some of their processes harder to complete.

Increasing user friction for specific tasks is a pillar of fintech UX design. The inherent appeal of fintech is the ease of use, but it cannot be so effortless that it is easy for users to make mistakes with their money. We saw this in the Venmo case study as well. The payment app adds an extra step to sending money by forcing the user to confirm their action.

Design roadblocks like these help curb user mistakes and prevent disastrous errors. It impedes your users momentarily, but not their overall experience. Your users will thank you for making things a bit harder as they want to know their money is in safe, trustworthy hands.

3. Feedback, Feedback, Feedback

Another tenet of usability, providing responsive feedback to the user is crucial in nearly every permutation of UX design. However, for fintech, it is not just prudent – it is absolutely necessary, and for the same reasons, friction is so imperative in fintech design as well.

Users, especially ones who are not digital natives, are going to be much more reluctant to entrust an app with control over their finances. When interfacing with any financial services platform, whether it be banking, investing, budgeting, or anything in between, the user is going to require near constant reassurance and validation that their information is safe and that the tasks they are completing are in fact, achieved.

4. Facing FinTech

Designing digital experiences for the financial sector can be frustrating, and not always exciting, but it does offer a fantastic opportunity for designers to tackle challenging, real-world, and relevant UX problems.

When I asked the user experience designers at Codal, the UX design agency I work for, about the projects they learned the most working on, nearly all of them mentioned the web app we built for an enterprise financial services company just last year. The project featured everything we talked about in this article: complicated logic, tons of red tape, and a highly technical workflow that required some serious studying of financial workings.

However, in the end, our designers pulled off an engaging, user-friendly platform, and learned a lot in the process. So for your fourth and final thing to remember when designing fintech: do not forget it is making you a smarter, better designer.

Source: usabilitygeek.com

Author: Sean McGowan

Posted in Knowledge sharing | Tagged , , | Leave a comment