UXD Jobs News & Events

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



Designing a Recruitment Tool to help HR Managers

Summary

The aim was to make the process of recruitment easier for HR Managers by building a product that helps keep track of all the information about the hiring process. In order to achieve this, it was important that the product allows HR Managers to keep track of the events performed during the hiring process for each individual opening in the company.

For example, If the manager has Y days to recruit a Product Designer, he should know that the interview round 1 of all the shortlisted candidates should be done in X days (where X<Y).

The Problem

HR Managers rely on different types of software provided by their company, or just use spreadsheets to manage and recruit for different positions.

Handling multiple parts of different types of job openings simultaneously makes it’s too complicated and cumbersome, since different job openings may have a completely different hiring process.


Design Process

User Research

My team was incubated in an HR Consultancy so we had the opportunity to interview and empathize with the HR Managers closely who were recruiting for different companies. Some of the key insights we gained through the process were :

  • The most common problem was not seeing all the job openings on a single screen. Navigating through sheets or screens to see information about different job positions is not what they were fond of.
  • Keeping track of events performed and yet to be performed for a job opening was a hassle.
  • If the Manager knows how many days are spent and how many tasks have been completed for all job openings individually, it’ll help the manager decide which job opening needs more efforts.

Ideation and Wireframing

After conducting interviews and understanding the problems, we had the basic idea of what the HR Managers needed and how our product should help them.

  • The product should be a single screen product as simplicity is the key and most of the HR Managers will have a hard time using complicated/advanced software.
  • There should be a way to keep track of all the events involved in the hiring process for any job.
  • A clear indication should be present which shows whether the manager is completing the events of a particular position before time, on time or if there is some delay.
  • A Signal which shows whether the overall hiring process of a particular job opening is before time, on time or delayed.
  • Also, Pop-ups of any sort had to avoided as it is naturally a bad user experience.

What are SLAs and SLA events in the Recruitment process?

SLA duration or SLA is a time duration given for hiring for a particular position. SLA events are the different events that are to be completed to hire for a particular position. For Example, conducting interview round 1 of all the shortlisted candidate is an SLA event.


Solution

As we had to release our product for beta testers as soon as possible, we did work on the UX but we knew we could do much better on the UI part.

After changing our style guide we kept on iterating and finally came up with a better design.

Source : uxplanet.org

Author : Pankaj Kumar

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

Ideation for Design – Preparing for the Design Race

Ideation is easy to define. It’s the process by which you generate, develop and then communicate new ideas. Ideas can take many forms such as verbal, visual, concrete or abstract. The principle is simple to create a process by which you can innovate, develop and actualize new products. Ideation is critical to both UX designers and learning experience designers.

As Pablo Picasso, the artist, said about his creations; “I begin with an idea, and then it becomes something else.”

deation does not need to be beautiful to be effective. Creating ideas is the main point rather than graphic design as you can see here.

There are many types of new idea and they are commonly found in the following patterns:

  • Problem to solution. Find a problem, find a solution – this is, perhaps, the most common form of ideation.
  • Derivation – where you take an existing idea and then change it (hopefully for the better)
  • Symbiotic – where you take a group of ideas and combine them to form a single coherent idea
  • Revolutionary – where you take an existing principle and smash it and derive a totally new perspective
  • Serendipitous discovery (or accidental discovery) – when an idea turns up when you are in pursuit of something else (penicillin would be a good example of serendipitous discovery)
  • Targeted innovation – an iterative process where the solution is theorized but the path to it is poorly understood. Repeated attempts are used to create the pathway.
  • Artistic innovation – a form of ideation which completely disregards “what is practical” and innovates without constraint
  • Computer aided innovation – where computers are used to probe for solutions and to conduct research

All of these processes can be used by the designer in search of ideas for a project. However, in many cases these are not practical (revolutionary ideation, for example, is generally a once or twice in a lifetime Eureka! moment and not a practical process) or out of budget/time constraints (such as targeted innovation or computer aided innovation).

Thus the designer will seek more practical and prosaic approaches when it comes to ideation including brainstorming, mind mapping, etc.

Ideation on Paper

Almost all ideation techniques can be deployed on paper. Brainstorming and mind mapping, for example, are simply the same process but visualized in different ways.

Thus, in this article, we will examine brainstorming as the key tool for ideation but other tools may be considered on projects to bring about similar results.

deation on paper. This is for a blog’s content but the same principles apply for any kind of ideation. Get it down on sticky notes and then organize ruthlessly.

Rules for Initial Ideation

When you are at the start of the ideation process you want to generate ideas in their multitudes. The idea is to follow a few simple rules, as a team, to deliver lots of ideas. These ideas, once the exercise is complete, can then be examined for practical considerations. The rules are as follows:

  • Prepare the space. Put up posters with user personas, the problem in hand, and any design models or processes that will be used on the project. The more context provided, the easier it should be to come up with ideas.
  • While initial ideation takes place – there are NO BAD IDEAS – the exercise is to create not judge ideas.
  • Unrelated ideas can be parked for another discussion. They should, however, be written down.
  • Volume is important don’t waste time examining any particular idea in depth just write it down and move on.
  • Don’t be afraid to use lots of space. Write ideas on Sticky-Notes and then plaster them on everything in the room. This can help participants connect seemingly unrelated ideas and enhance them,
  • No distractions. Turn off phones, laptops, etc. Lock the door or put a sign outside saying “Do not disturb.” You can’t create ideas when you’re constantly interrupted.
  • Where possible be specific. Draw ideas if you can’t articulate them in writing. Make sure you include as much data as possible to make an idea useful.

Once you have the rules understood. Grab your team and get creative. It can help to do a 10 minute warm up on an unrelated topic to get people thinking before you tackle the problem in hand. Don’t take more than 2 hours for initial ideation.

Laying down rules at the start of an ideation session will help keep things on track throughout. Don’t be afraid to call people’s attention to the rules if they begin to bend or break.

Structuring Your Ideas

Once you’ve got some ideas coming it’s a good idea to group them around specific areas. Some common idea areas include:

  • Pain Points
  • Opportunities
  • Process Steps
  • Personas
  • Metaphors

When You Get Stuck

There are also some simple techniques to get the creative juices flowing when the ideas process gets stuck.

  • Breaking the law. List all the known project constraints and see if you can break them.
  • Comparisons. Taking a single phrase that encapsulates the problem and see if you can find real world examples of this.
  • Be poetic. Try to turn the problem into a poem or haiku. Thinking about the word structures can deliver new ideas.
  • Keep asking “how and why?” – These words make us think and create.
  • Use laddering. Move problems from the abstract to the concrete or vice-versa to consider them from another perspective.
  • Steal ideas. If you get stuck on a particular concept – look to other industries and see how they’ve handled something similar. Of course, in the end you should be emulating in design not copying.
  • Invert the problem. Act like you want to do the exact opposite of what you’ve set out to do – how would you do that instead?
  • Even simple inversions can make us think very differently. Here the inversion of color changes the picture dramatically.

    Review and Filter

    Once you have a large number of ideas; you then need to review and filter these down to something more manageable. It is at this stage that ideas can be discarded as “bad”, kept as “good” or modified into something more useful. It’s best to carry out this exercise a little while after the initial ideation phase so that people have a chance to reflect on the ideation as well as become less personally attached to the original ideas.

    The Take Away

    Creating ideas is often best done in groups – though all the techniques above can be carried out by an individual too. The trick is to just create and keep doing so for an extended period of time. You can worry about works and what doesn’t later. Ideation is one of the most fun things a designer can do but it can also be frustrating if you try and do it by yourself sat in front of a piece of paper.

Source : interaction-design.org

Posted in Knowledge sharing | Leave a comment

Safe & simple: Can UX design protect us from hackers?

Digitalisation has made some things in life simpler, but not security.

By Andy Eva-Dale & Lucy Valentinova

“Currently, verifying your identity online… places a huge burden on individuals, who have to successfully remember hundreds of passwords for various identities and are increasingly being subjected to more complexity in proving their identity and managing their data.”

Beyond being inconvenient, this complexity is proving positively dangerous — and yet, neither brands nor consumers seem capable of tackling the problem. Today’s consumer has little patience for the faff of multi-device, multi-interface, multi-page verification processes, thumbing codes into cumbersome mobile keyboards and endless password resets. Businesses, meanwhile, are still figuring out how to profit from customer data, whilst the scale and costs of data hacks are escalating. The Marriot-Starwood breach this year was the second-largest in history, with 500m customers affected. The largest-ever attack — on all 3bn Yahoo accounts — ended up costing $47m in litigation expenses.

Easier said than done

Consumers are cybersecurity-conscious, but disinterested in managing the risks. PwC’s 2017 Protect.me survey found that “87% of consumers say they will take their business elsewhere if they don’t trust a company is handling their data responsibly”. And yet…

“Almost one in five people has faced an account hacking attempt but … only a third create new passwords for different online accounts and a worrying one-in-10 people use the same password for all their online accounts”

A lack of understanding seems to be an issue. Two Indiana University academics surveyed 500 American adults to understand why two-factor authentication — theoretically, a fairly effective security protocol — is not more popular. Most consumers, apparently, simply didn’t see the urgency. One of the researchers said of the participants, “We got a lot of, ‘My password is great. My password is plenty long enough.” In an interview with The Economist, Adam Cooper, Lead Technical Architect at GOV.UK Verify confessed: “I am baffled most of the time” by most ID login processes.

This shows that if we are to work towards a more cyber-secure world, consumers are unlikely to be much help. Indeed, the same PwC study found that “72% of consumers believe businesses, not government, are best equipped to protect them.” This may be a misguided expectation; conducting a business online appears to depend on hoarding a mouth-watering jackpot of juicy data.

‘A key source of stolen card credentials remains persistent compromises of merchants who store card numbers along with customer details on their own systems as illustrated by hacks against Target, Equifax, Heartland and most recently Marriott.’ — IT News

Failing to find a protocol simple enough for everyone will be costly. Marriot’s massive data breach earlier this year led to embarrassing levels of attention from the authorities. According to CNBC, “Attorney generals in Connecticut, Illinois, Massachusetts, New York and Pennsylvania said they would investigate the attack, as did the UK’s Information Commissioner’s Office”.

The NY Times reports Target’s heavily-publicised data breach in 2013 cost the retailer $202m. There is also a risk to profits. Whilst the vast majority of trade still takes place offline, digitally engaged consumers are more measurable, marketable and profitable. Mobile payment users spend twice as much online as illustrated by this Retail Dive report.

UX Proofed

UX improvements are one piece of the puzzle, making it easier for consumers to protect themselves. Indeed, simple security has become a selling point. Monzo Bank shouts about how easy it is to block/unblock a lost credit card…and brands in finance and beyond are now working to introduce this same ethos into their digital UX. There’s a host of good examples. Most obviously, brands should reduce steps and alleviate the load on consumers. Biometrics, for instance, can now be used to log into online services provided by Bank of America, Capital One and Wells Fargo. Users of the Target app can also use a thumbprint to log in.

Similar gains can be made by simple UX planning. Lloyds bank, for instance, allows customers to bypass repetitive phone security questions by calling via the app. Where additional security protocols are required, they must be effortless. Two-factor authentication (2FA) is fairly quick and easy, and may even be triggered on demand. Barclays Bank customers who receive a customer service call can request a verification message via the app to confirm it’s not a scam. You might also consider making security more fun. Players of Fortnite, an online video game, can “unlock a skin” (I’m told this a good thing) by enabling 2FA on their accounts.

As important as these developments are, however, they cannot be the full solution, as UX improvements do not improve the way brands store and protect data. This brings the debate under the bigger umbrella question of how we — or how interested parties — manage our identities online.

Got ID?

“Any individual’s identity is contingent on the recognition of others… anything like a modern life is rendered all but impossible when that recognition is not forthcoming, or is suborned.”

The Economist, December 2018

If you think about it, cash is exceptionally secure and simple: merchant and consumer confirm and verify the transaction on the spot, face-to-face. Short of violent crime, not much can go wrong. Digital payments present the challenge of how to compensate for this innate security. There are two possible approaches. One of them — currently commonplace — is to compensate for the lack of the person. This entails recording secure information (i.e., password-and-email combos), and/or by interacting with a device or card assumed to be in the customer’s possession.

The secure information is, however, a new layer of complexity, and a weak point which can be exploited by criminals focusing on card-not-present fraud…

“using stolen identification to open credit lines… creating new, digital-only identities by knitting together real and fictitious information.”

An Accenture study suggested that global annual losses of this kind of fraud may already run into the tens of billions. Dependency on ‘secure’ devices raises similar problems. The device may be stolen, and even biometrics can be hacked. Granted, brands could raise their defences. Monzo — again, leading the charge — used data analysis to help tackle a Ticketmaster breach this year. The challenger bank also operates a machine learning-powered fraud detection system.

But developments like this are really patches on a fundamentally flawed model, where a consumer brand is expected to police transactions and guard stored data. A second approach seems rather more futureproof. The thinking is that, rather than compensating for the physical person, you supplant them, relying on a verifiable digital identity instead.

Take the example of Estonia, hailed as a world leader in digital identification. ‘All residents have electronic ID cards, which are used in health care, electronic banking and shopping, to sign contracts and encrypt e-mail, as tram tickets, and much more besides — even to vote…

Estonia’s system uses suitably hefty encryption. Only a minimum of private data are kept on the ID card itself… Also issued are two PIN codes, one for authentication (proving who the holder is) and one for authorisation (signing documents or making payments). Asked to authenticate a user, the service concerned queries a central database to check that the card and relevant code match. It also asks for only the minimum information needed: to check a customer’s age, for example, it does not ask, “How old is this person?” but merely, “Is this person over 18?”’

Though rigorous and secure at a technological level, at customer level, it’s nothing more than PIN verification: an exceptionally simple protocol. The system is yet to have been hacked, and the success has not gone unnoticed. Banks, card issuers, technology companies and governments are now all proactively troubleshooting how to manage our digital identities online. Here is a podcast that talks about the issues of security, 2-step verification and SIM swapping.

More money more problems

Silicon Valley companies own the devices and operating systems on which digital transactions take place, as well as analogues of our identities in the forms of email accounts and social profiles.

This makes them useful partners. “Sign in with Google/Facebook” really is very simple. True enough, nine out ten companies which rely on a third-party identity supplier use either Google, Facebook, or both. But there are problems. For all their reach, neither Google nor Facebook is all-pervasive. Social channels phase in and out of fashion, and a majority of retail takes place offline. Nor is there a consumer appetite for putting that level of trust in big tech.

A survey of 133k consumers by consultancy Bain & Company put these companies at the bottom of the pile.

Equally, many governments may shy away from wading in. The UK’s first attempt to introduce national ID cards was a £4.5bn failure, partly because it conjured unsavoury connotations. And in countries much larger than Estonia, governmental ID requirements may hinder the relatively simple task of managing simple, secure transactions. Aadhaar, India’s foray into mandatory digital identity, has been plagued by problems, with people being refused basic services as wide-ranging as posting a letter to receiving healthcare.

Joining forces

Card issuers have seized on the natural bridge between payment and identity, and they seem to offer the greatest promise of salvation. In December 2018, Mastercard announced a strategic collaboration with Microsoft over an as-yet vague service “that would allow individuals to enter, control and share their identity data their way — on the devices they use every day”. VISA is also plugging away. Card issuers have two reasons to feel confident of their success: engrained trust, and unparalleled reach. Ninety-six percent of the UK population has a debit card, and even market stallholders now often accept card payments. Tellingly, the majority of forays into payments to date by the FAANGs have linked back to a major card issuer. Technology companies, meanwhile, may manage matters such as the device, the interface, and necessary intelligent back-end tech required to create a secure, “universally-recognised digital identity”.

The importance of an agile technology partner cannot be underestimated. Exceptionally simple, minimalist user interfaces have been part and parcel of the success of Monzo and other challenger banks, whilst traditional-model banks languish with underwhelming digital customer service provisions and outdated UX. Card issuers and big tech firms must ensure they do not also fall victim to corporate inertia. Whilst they may not face equivalent competitive threats (payment processing is a tougher nut to crack than banking), consumer adoption is far from guaranteed.

‘Pindependent’

Consumers’ own inclination to defend themselves online may only weaken with time. Start-ups are sniffing around the payments and identity spaces. Yoti, for instance, seeks to become the “world’s trusted identity platform”’, storing customers’ government documents for purposes such as buying age-restricted products. Though only a piecemeal solution, advancements such as this will further raise customers’ demands for ease and simplicity. There is no panacea for meeting these demands. Reducing the burden on consumers’ time and attention is vital, and this can be achieved through UX improvements at every stage in the customer journey. Brands, equally, cannot realistically be expected to provide a robust defence against cybercrime. Intelligent technologies may support them, but as long as they need to store customer data in order to do business, they will remain irresistible targets to fraudsters. To connect the dots, a new security protocol must be established which alleviates the burden on both parties.

Something like the card PIN code holds promise. It’s very secure, very simple, and it already enjoys mass adoption; indeed, mobile payment apps already generally rely on a PIN login. The step towards it being used to authorise online transactions seems relatively small. The prize for tackling this goes beyond preventing crime. Mobile payments in-store are still only popular with 3–7% of western consumers, and only a quarter appear willing to try. If digital payments became viewed as being safe, or safer, than card transactions, this should also open up further marketing opportunities via the customer’s device: location based-targeting, beacons, push-notifications, personalised offers, etc.

That, in turn, should unlock a simpler, safer and more profitable future for all.

Words by

Andy Eva-Dale is a process-driven Technical Director with a passion for anything technical. He has over 15 years application development experience; working with organisations such as the London Stock Exchange, BAE Systems and WPP. During this time he has worked across full stacks on projects such as Grant Thornton, Aegon and East Midlands trains; scoping, designing, documenting and delivering award-winning, large enterprise standard products on a global scale. Andy has certifications in multiple technologies, has delivered talks on emerging technologies and is an active member of various communities

Contributing writer, Lucy Valentinova is a User Experience Consultant who is focused on delivering innovative websites and digital services that meet user, business, and development goals. UX design, strategy, user research and information architecture are central to her work and enable her to make informed decisions when it comes to proposing digital solutions.

If you are considering a career in tech and want to avoid the burnout disease sweeping this industry, here are a few wellbeing initiatives we implement to eliminate the risk of running on empty.

Source: uxplanet.org

Posted in Knowledge sharing | Leave a comment

Designing User Experience for Virtual Reality applications

Virtual Reality (VR) infers a total inundation experience that closes out the physical world. Utilizing VR gadgets, for example, HTC Vive, Oculus Rift or Google Cardboard. Users can be transported into a various genuine world and envisioned situations, for example, the center of a screeching penguin state or even the back of a monster.

There are other reality experiences that exist like Augmented Reality, Mixed Reality, and Extended Reality which provide the user with different experiences

Augmented reality (AR) adds digital elements to a live view often by using the camera on a smartphone. Examples of augmented reality experiences include Snapchat lenses and the game Pokemon Go.

In a mixed reality (MR) experience, which combines elements of both AR and VR, real-world and digital objects interact. Mixed reality technology is just now starting to take off with Microsoft’s HoloLens one of the most notable early mixed reality apparatuses.

Relating Conventional Design to 3D experience

The market has furnished designers with a lot if reliable work over the past few decades and is going to move towards a new paradigm of vivid 3D content. Sound, touch, depth, and feeling will all be fundamental to the VR experience, making even the most novel 2D screen encounters feel exhausting and dated.

VR provides many of the same benefits of training in a physical environment — but without the accompanying safety risks. If a subject becomes overwhelmed, they can easily take off the headset or adjust the experience to be less overwhelming. This simple fact makes means specific industries like healthcare, military, police, and so on should prioritize finding ways to use VR for training.

Think Skype for Business on steroids. VR has the potential to bring digital workers together in digital meetings and conferences. There will be real-time event coverage, something like Facebook Live with VR. Rather than merely seeing the other person on a screen, you’ll be able to feel as if you are in the same room with them, despite being miles away.

Think about how you collaborate with a touchscreen screen today. There are various examples that we have all developed to understand, for example, swiping, squeezing to zoom, and long tapping to raise more choices. These are altogether contemplation’s that ought to be made in VR also. I’m sure that as more creators come into the VR field, there will be more personalities to make and vet new UI designs, helping the business to push ahead.

Interactivity in virtual reality is composed of three elements. These are speed, range, and mapping. Speed is the response time of the virtual world. If the virtual world responses to user actions as quickly as possible, it is considered an interactive simulation since immediacy of responses affect the vividness of the environment. Many researchers try to determine the characteristics and components of interactivity of Virtual reality in different ways. However, in order to do this perfectly, the designers have to acquire a thorough real-world understanding, meaning that they need to visualize the typical physical space surrounding the user and then build on the elements that they’ve perused. This is so because at no point you want your users to feel uncomfortable and feel like the newly introduced elements are invading their personal space.

So, What all kind of apps are we going to design

Generally speaking from a designer’s perspective, VR applications are made up of two types of components: environments and interfaces.

You can think of an environment as the world that you enter when you put on a VR headset — the virtual planet you find yourself on, or the view from the roller-coaster that you’re riding.

An interface is the set of elements that users interact with to navigate an environment and control their experience. All VR apps can be positioned along two axes according to the complexity of these two components.

  • In the top-left quadrant are things like simulators, such as the roller-coaster experience linked to above. These have a fully formed environment but no interface at all. You’re simply locked in for the ride.
  • In the opposite quadrant are apps that have a developed interface but little or no environment. Samsung’s Gear VR home screen is a good example.

How to start designing the user experience for virtual reality

Before you start designing for your VR app, considering some of these fundamental questions may help you:

  • How do people get started?
  • What affordances are provided to guide people without overwhelming them?
  • Do you want to err on the side of providing too much guidance or create a minimalist environment that doesn’t overload the user with too many choices?

Don’t expect people to know what to do and where to go. Slow and progressive familiarization, visual clues, and guidance from the software should all be used to help the user. When you’re designing for VR, you’re designing for the capabilities of people as much as you’re designing for the capabilities of the system. So it’s essential that you understand your users and the issues that may come up while they experience VR.

VR experience isn’t too different than the process for designing a web or mobile product. You will need user personas, conceptual flows, wire-frames, and an interaction model.

The Process for Designing User Experience for Virtual Reality

before you even begin considering structuring for VR, you need to consider what sort of Experience you need to make? There is certainly not a one-measure fits-all. Most ethnographic research strategies are totally open within VR, including:

Client Interviews, Fly-on-the-Wall, Usability Testing, Touchstone Tours, Simulation Exercises, Shadowing, Participant Observation, Heuristic Evaluation, Focus Groups, Eye Tracking, Exploratory Research, and Diary Studies.

WIRE-FRAMES:

Generally, as designers do, we’ll go through rapid iterations, defining the interactions and general layout.

VISUAL DESIGN

At this stage, after the features and interactions have been approved. Brand guidelines are now applied to the wire-frames, and a beautiful interface is crafted.

The Design Process for VR apps would not change dramatically apart considering few usability issues from our normal design process.

Setting up the environment for designing

Canvas size

To apply mobile app workflow to VR UIs, you first have to figure out a canvas size that makes sense.

Below is what a 360-degree environment looks like when flattened. This representation is called an equirectangular projection. In a 3D virtual environment, these projections are wrapped around a sphere to mimic the real world.

The full width of the projection represents 360 degrees horizontally and 180 degrees vertically. We can use this to define the pixel size of the canvas: 3600 × 1800. Working with such a big size can be a challenge. But because we’re primarily interested in the interface aspect of VR apps, we can concentrate on a segment of this canvas.

Building on Mike Alger’s early research on comfortable viewing areas, we can isolate a portion where it makes sense to present the interface.

The area of interest represents the one-ninth of the 360-degree environment. It’s positioned right at the center of the equirectangular image and is 1200 × 600 pixels in size.

Pencil & Paper

Before getting into any software, it’s crucial to get your ideas out on paper. It’s fast, cheap, and helps you express ideas that may take hours in software. This is especially important because moving from sketches to hi-fidelity can cost much more in 3D than in 2D.

Software

Some designers start with tools they already know like Sketch, others use it as an opportunity to learn new tools. It really depends on what engine you are going to use to build your app. If you are building a 3D game, you’ll want to use Unity or Unreal Engine. Cinema 4D and Maya are also widely used, but mostly for complex animations and renderings.

PRINCIPLES TO CONSIDER WHILE DESIGNING

TEXT READABILITY

Because of the display’s resolution, all of your beautifully crisp UI elements will look pixelated. This means, first, that text will be difficult to read and, secondly, that there will be a high level of aliasing on straight lines. Try to avoid using big text blocks and highly detailed UI elements.

Intended viewing distance: how far away we have designed these to be viewed. What is the optimal distance that these screens were intended to be viewed from and that intended viewing distance will inform the size of the screen in addition to the size and density of the content therein.

Distance-independent millimeter or A dmm can be described as one millimeter at a meter away. So it’s an angular unit that just follows a millimeter as it scales off into the distance. Let’s look at a concrete example. In the upper left-hand corner of this diagram, I have a screen space layout that I have measured in dmm’s, All of my UI elements are measured in dmms. It is 400×480 dmms tall and then I have applied that layout in world space to three separate virtual screens.

All of these virtual screens have different intended viewing distance. From the vantage point, that all of these screens are intended to be viewed from, they will look same to the user, they will have same angular size and text would be just as readable, buttons would be just as clickable and motion will appear to move same as well.

Ergonomics

When first designing for VR it’s exciting to think about creating futuristic interfaces like we’ve seen from Hollywood blockbusters like Iron Man or Minority Report, but the reality is those UIs would be exhausting if used for more than a few minutes. The following diagrams help to illustrate the comfortable range of motion zones:

We’ve all been affected by some sort of “text neck” syndrome at some point (the soreness felt from looking down at our smart phones for extended periods). Depending on how far you lean over, poor posture can create up to 60 pounds of pressure on your spine. This can lead to permanent nerve damage in your spine and neck.

AVOIDING SIMULATOR SICKNESS

Virtual reality introduces a new set of physiological considerations for design. Like flight simulators used by pilots in training, virtual reality has the potential to present mismatches between physical and visual motion cues. This mismatch can produce nausea known as “simulator sickness,” when your eyes think you’re moving, but your body does not.

Understanding the physiological effects of virtual reality design, and following these guidelines, is critical to making your app success and ensuring that users avoid simulator sickness.

BRIGHTNESS CHANGES

Be mindful of sudden changes in brightness. Given the proximity of the screen to the user’s eyes, transitioning the user from a dark scene to a bright scene may cause discomfort as they acclimate to the new level of brightness. It is similar to stepping out of a dark room into the sun.

BUTTON PLACEMENT

Avoid placing fuse buttons in close proximity to each other. Fuse buttons work best if they are large targets that are sufficiently far apart from each other.

If multiple smaller fuse buttons are placed near each other, the user could accidentally click on the wrong button. Smaller buttons that are close to each other should require a direct click to activate.

“Instead of trying to adapt ourselves to fit the limited interactions supported by our existing technologies, our interactions with VR platforms will need to be as natural and intuitive as possible.”

Tools for Designing VR Experience

Sketch

Sketch to VR is a sketch plugin that uses another tool called A-Frame. The Sketch to VR plugin automatically creates an A-Frame website, but all we need to worry about is creating our design in the sketch.

Google Blocks

Use simple 3D geometry to simulate a sense of scale and depth. If you have a rift or vive, you can use Google Blocks to prototype your ideas. This isn’t something you’d put in front of a user, but you can begin to see how your 3D environment might look and feel.

Photoshop

Photoshop lets us use core image editing tools like the pen and brush tool, to draw elements that appear to be in 3D space.

Designing VR apps on Sketch

SET UP “360 VIEW”

First things first. Let’s create a canvas that will represent the 360-degree view. Open a new document in Sketch, and create an artboard: 3600 × 1800 pixels. Import the file and place it in the middle of the canvas. If you’re using your own equirectangular background, make sure its proportions are 2:1, and resize it to 3600 × 1800 pixels.

SET UP ARTBOARD

As mentioned above, the “UI View” is a cropped version of the “360 View” and focuses on the VR interface only. Create a new artboard next to the previous one: 1200 × 600 pixels. Then, copy the background that we just added to our “360 View,” and place it in the middle of our new artboard. Don’t resize it! We want to keep a cropped version of the background here.

DESIGN THE INTERFACE

We’re going to design our interface on the “UI View” canvas. We’ll keep things simple for the sake of this exercise and add a row of tiles. Duplicate it, and create a row of three tiles.

MERGE ARTBOARDS AND EXPORT

Drag the “UI View” artboard to the middle of the “360 View” artboard. Export the “360 View” artboard as a PNG; the “UI View” will be on top of it.

TEST IT IN VR

Open the GoPro VR Player and drag the “360 View” PNG that you just exported into the window. Drag the image with your mouse to preview your 360-degree environment.

PROTOTYPING

Here, we’ll organize screens into flows, drawing links between screens and describing the interactions for each screen. We call this the app’s blueprint, and it will be used as the main reference for developers working on the project.

Conclusion

As a Designer, I think this is the ripe time to start enhancing our skills to nurture the future of the Design industry and the important part it plays to enhance and improve the day to day life of application users. The best part of the lot is that the same concepts and ideation methods used in design thinking and ux methodology still remain the same with focus on some new principles of interaction as mentioned above.

Posted in Knowledge sharing | Leave a comment

UX Will Happen Anyway: Tactics vs. Strategy

Some time ago, as I solidified my role as a UX designer, and focused most of my efforts on all the user-centered design deliverables that entailed, I still found myself with a healthy helping of UI design tasks. So I continued producing visual design and interaction on a small-scale, reactive basis, according to the needs of the development team. It turns out, this wasn’t a bad thing, as the crafting of the user experience doesn’t end with flow charts and wireframes, and inevitably unplanned feature requests will happen. I began to refer to these activities as “tactical UX design,” as a thing not apart from, but part of the overall UXD workflow.

Tactical UXD

What It Is

Tactical UXD is the day-to-day UI design that is necessary before and during product development. It presents in the form of small feature requests and unplanned enhancements, such as bug fixes or critical missed requirements. “Tactical UXD” is largely analogous to “UI design,” except for the “UX” component of the term, which implies a greater role in a larger strategic picture; it’s a discipline that doesn’t get enough love in terms of overall importance in relationship to other user experience design components. (The fact that UI design is often mistaken for UX design doesn’t address that gap; rather that’s a misunderstanding with tomes of analysis and frustration already dedicated to the topic.)

Because my job responsibilities as a UX designer at a small organization still included UI design, when I wore my “UI designer” hat, the user-centric gears still turned. When I collaborated with developers on active tickets, I was mindful to do so in a way that ensured that those new feature designs took into account the context of the user we were building them for. Even for these small features, I still wanted to understand “for whom am I designing?” and “what problem does it solve?”

Strictly speaking, someone in a UI design role may sometimes have the luxury (or misfortune, depending on the individual) of focusing only on the necessary design and interaction that is requested of her, through requirement documentation or development tickets. However, even with these smaller enhancements, context is a big benefit to designer and end-user alike, and should not be ignored.

If more upstream user research and data isn’t readily available, it’s still helpful to question the requirements in order to understand their value to the end-user. Hopefully, these requests can be understood in the broader context of a product for which more user information is available. If a full UXD process is in place, the UI designer can refer to the personas for that product and apply them to one-off requests.

Since a UI designer plays an important role in the tactical execution of a UXD strategy and should strive to integrate into it as much as possible, where should she draw the line with involvement? On the ubiquitous “UX Iceberg” visualization (which is, in turn, is just a friendlier visual metaphor for the Jesse James Garrett diagram) UI design is often equated with the “Surface” component. However, in my experience, I have met few UI designers whose responsibilities, in practice, were limited to “visual design” (VizD). There’s usually more than a little interaction design (IxD), sometimes information architecture (IA), and if she knows what’s good for her (and she can get away with it) a little user research — if she is not also the front-end developer, that is! The line is already blurred, so let’s call it something else: tactical UXD.

What It Isn’t

If tactical UX is not simply visual design done in a vacuum, it is not at all a substitute for a full user experience design process, even if for many years (and still in many companies) “UX” is still equated with “UI.” In these environments, deliberate user experience design is neglected until so late in the process that it often falls to the UI designer — or the front-end developer, as often no distinction is even made between those two roles. It’s no surprise that development teams and recruiters began to combine these responsibilities into one-and-the-same position, a contributing factor as to why so many “converted” UX designers actually cut their teeth in programming. Many picked up on the fact that being handed a directive to design from already completed requirements, with no customer context, on top of the already immense responsibility of coding, resulted in a lot of missed-marks, shelf-ware, and just generally bad UIs. (I’ve dedicated a separate article to the topic).

Strategic UXD

UX Will Happen Anyway

Strategic UXD is the user experience design process when executed in a deliberate and user-centric manner, from ideation to launch. Just as tactical UXD is somewhat analogous to UI design, “strategic user experience design” seems synonymous with “user experience design” itself — nearly a circular definition in fact — until one pauses to consider that user experience “designs” occur naturally as a by-product of any product design process, regardless of whether anyone is guiding that process. Users are sure to have some sort of experience, and chances are very high that a thoughtless or ill-fashioned experience will be a bad one. Thus, there is “user experience design,” and there is “Strategic User Experience Design.”

Tactics as Strategic Component

Strategic UXD is equivalent to deliberate UXD, and it also incorporates tactical UXD. This is because a successful strategy relies upon a successful execution. Think of it like a river flowing down a mountain: the whole body of water is named “UXD Strategy.” (I know, weird name for a river, but bear with me.) Some tributaries lie upstream, while others feed in downstream, though all of them are contributing to this river. Similarly, there may be a division of contributing roles upstream (product vision, user research) vs. downstream (interaction and visual design), but each player is conscientiously contributing to the overall UX strategy.

Product Management: Strategic UXD’s Older Supportive Brother

Another consideration is the role that product management plays in the success of a UXD strategy. This topic is gaining considerable momentum as professionals in both domains recognize the interconnectedness. Many of the upstream UXD activities are either dependent on product management processes, or are one-and-the-same. For example, product managers are well positioned to develop personas. Then of course, there is the simple fact that a positive user experience ultimately depends on whether the business goals are aligned with user needs, something only product managers and business owners can ensure at a product’s early stages (though the UX designer can and should offer input and research data).

Potential Points of Failure

1. Obviously, if there IS no UXD strategy in place, the user experience will evolve in a happenstance fashion, either by non-UX individuals upstream, or an ill-equipped UI designer/front-end developer at the end of the process.

2. There are designated individuals responsible for each phase of the UXD, but for whatever reason, they are not communicating (different departments, bureaucracy, etc.). For example, the personas and scenarios developed by a product manager never flow downstream into the UI designer’s hands.

Conclusion: Strategic UXD = Good UXD

Strategic UXD is simply conscientious, deliberate UX design, which includes curious, competent UI designers, their UX counterparts, and anyone else who is contributing to the Strategic UX stream. Failure to recognize this results in unpredictable experience design results, usually at the cost of the end-user.

Source : uxplanet.org

Posted in Knowledge sharing | Leave a comment

Design Can’t Live Alone

What is the difference between a designer and an artist? What is the primary goal of design? How can you recognize outstanding design?

My mind is getting around the answers to these questions. I am passionate about the design in all its appearances. Everything like the graphic, industrial, interior, and product design excite the imagination. Art and design are close terms. They are so close that people tend to mix them up. At this point, I would like to add some clarity. I am broadly sympathetic to the words by Matias Duarte, Vice President of Design at Google, on the definition of the primary function of the design:

Design is all about finding solutions within constraints. If there were no constraints, it’s not design — it’s art.

My job requires tight communication with Dashdevs’ design team. I get requirements from clients and transfer them to designers. Moreover, I have fair expectations for their work results. I want to see a design for the application with UI/UI solution and nowhere near an oeuvre or over-creative masterpieces that can’t be implemented in a reasonable time. My personal belief is that design must be comprehensive, functional, and transparent for the user. In my ideal world, I can take any screen from the application and show it to a bypasser. The stranger should be able to name the goal of the screen and recognize all the apparent functionality. It is like a seal of approval for me that the design is great.

Application design constraints

Let’s get back to the words of Matias Duarte. The design must have constraints. For the last years, I have been working with the development of web and mobile applications. Their constraints are really similar:

  • The Persona — we are creating the application for the particular users’ type. A typical person has the pain that the application could solve. Do not forget about the gains and additional value. Create a design for people, and they will love it. The designer must feel empathy for the user.
  • Programming language possibilities — not every creative idea of the artist may be appropriately implemented. Let me set this clear. We can develop any visual effects in the mobile application. However, they can kill the device battery in minutes or slow down the performance of the application. Do you really need it?
  • Technical limitation — the design is excellent, but almost every application has its guts. The application is connected to the backend via API (application programming interface). Backend/ API provides a valuable contribution to the design. If the application is built from scratch totally, it is much easier to negotiate technical restrictions to design. However, in some cases, you need to work with a bad architecture of API. Your perfect design may be spoiled by it.
  • Time and budget — everything can be done some way. Sometimes it may take a lot of time or cost you too much. These two constraints always go together.

I notice that neglecting these constraints can ruin even the most perspective project. First of all, your target audience can reject your application. They don’t get the idea. The second issue is when the client (or decision maker) fall in love with a magnificent prototype. A prototype looks dynamic and is done on platforms like InVision, Marvel, or Principle. The client expects to see the same implementation in the mobile application. At this point, the technical side enters with its red lines of limitations. Consequently, all of these influence on time/budget ratio.

Design processes

I consider that everyone can nurture design skills. One should not be a natural-born designer. For some people it is easy, for others it takes a lot of time and affords. That is why appropriate design workflow is so important. It can help not only get better business results, but it helps a designer to improve himself as a professional.

I come across and took part in different design workflows. Every approach has advantages and disadvantages. Giving thanks that we had various projects, we got a chance to experiment much. So, the best design workflow for us looks like this:

  1. Research. It consists of two parts. The first one is the market research: define main players, do benchmark analysis, and look for the substitute products. The second part of the research process is dedicated to users. Some products are specific. The designer needs to deep into psychology and behavior of the typical user. At this stage, we need to create a persona.
  2. Design creation. Here we try different approaches — atomic design, co-creation, design thinking. You name it. The approach depends on the team, project, and timeframe. I’ve written about the process improvements that save our time in this article — here. Please check it.
  3. Design cross-review. This step is really vital for the process of design creation. The goal is to review the design with a fresh look and improve it, if possible. A new unbiased designer may see more options and introduce new ideas than the designer wrapped up in work fully. By the way, this step also helps to share the knowledge and experience in the team.
  4. Technical review. This step can protect you from making a number of mistakes. We provide the developers with the latest design and business requirements. They check it for API compatibility and technology implementability. Usually, we have a lot of good suggestions about the flow, animations, and UX. Most of the developers have an analytical mindset. The technical review helps us to improve not only the design skills but educate designers technically.
  5. Demo for the client. A designer and client engager usually present a demo to the client. As our good practice, we prepare a dynamic prototype in Marvel or InVision. During the demo, we get feedback and discuss the possible options for the improvements. If the design is not good enough for the client, we turn back to the second step.
  6. Estimate. Only if the client approves the design, we can provide the most realistic estimation for development.

It is the perfect workflow due to our experience. However, design workflow is not the only thing that must be done. We have started a series of technical lectures for designers and managers. They need to understand how the application is working from the inside. It is impossible to create a great product if you don’t understand its internal structure.

I believe in educated intuition, which you gain through a profound experience. My great inspiration is Raymond Loewy. He worked with totally different products like copy machines, refrigerators, cars, and locomotives. No matter what was the product, he always was thinking about the user first. He had changed many things. They are so ordinary for us right now. I think that he was the best UI/UX designer of the century.

“The main goal is not to complicate the already difficult life of the consumer.”

Raymond Loewy

In Dashdevs we believe that the design of mobile and web applications is a combination of aesthetics and functionality. Every workflow and process in our company must improve these two components. We are experimenting with different approaches. The described one is the optimal choice for us at the moment. However, we take it up a notch.

How do you improve your design processes?

P.S. If you don’t see mistakes in something that you designed a year ago, I have a piece of sad news for you. You have no progress since.

Written by Irina Bulygina

Source: uxplanet.org

Posted in Knowledge sharing | Leave a comment

Including Animation In Your Design System

(This article is sponsored by Adobe.) Design systems come in all shapes and sizes, but as Sparkbox’s design system survey noted, not all of them include guidelines for animation. Sure, some teams may have decided that motion wasn’t something their product needed guidance on, but I suspect that in some cases motion was left out because they weren’t sure what to include.

In the past few years, I’ve talked with many teams and designers who admit they think motion is something they should address, but they just aren’t sure how. If you’re in that boat, you’re in luck. This article is all about what to include in a set of motion guidelines for your design system and how to pull it off.

Why Animation?

Animation is an important design tool for both UX and brand messaging. Just like typography and color, the animation you use says something about your product and its personality. So, when it’s not addressed in a design system, that system essentially leaves that area of UI design tooling unaccounted for. Then people following the design system either do whatever they want with animation — which can lead to a strange mish-mash of animation execution across the experience — or, they just don’t use animation at all because they don’t have time to figure out all the details themselves. Neither case is ideal.

Having a clear stance on how animation is used (or not used) in your design system can help ensure your brand is using animation consistently and effectively while also helping your team work faster. Let’s dig in to get started on a set of motion guidelines for your design system.

The Groundwork: Defining What You Need To Cover

FIRST, TALK TO PEOPLE

As Jina Anne says, “Design systems are for people.” I’ve often heard the advice that talking to the people who will be using the design system you’re creating is key to making a design system people will actually use. That holds true for the guidelines you create around animation too. The biggest thing you can gain from this is finding out what they need and what to focus on. This helps you set an appropriate scope for what you need to cover in your guidelines. No one wants to spend hours on extensive guidelines that address more than your team will ever actually need. That wouldn’t be any fun (or use).

Set up some user interviews (the users of your design system) and ask them about where they get stuck with animation. Ask them how/if they use animation, and where animation falls in their design process. Ask them about what they wish they had to help with the pain points they encounter. Most importantly, listen to how they talk about using animation in their work and what goes well or not so well.

While every team is different, the concerns and questions I’ve heard most often when doing this research are things like: “How do I know an animation is good, or fits with our brand?”, “How can I convey the animation details to our engineers effectively?”,or “Our developers always say there’s no time to implement the animations we design.”

You’ve probably guessed where I’m going with this, but all of those concerns are things you can help provide answers to in your motion guidelines. And you can use the questions and pain points that come up most often to guide and focus your motion guideline efforts.

REFERENCE OTHER SYSTEMS

Not every design system has to be public, but it’s great that so many of them are. They make for a helpful resource when planning your design system, and they can be useful research for your design system’s motion guidelines too. (In fact, we’ll be referencing a few them in this very article.)

Using other motion sections as reference for your own design system is very helpful, but I don’t recommend adopting another brand’s motion guidelines wholesale in place of your own. No, not even if it’s Material Design’s motion guidelines.

Material Design’s motion section is Google’s take on motion guidelines. A good one, yes, but its aim is to show you how to animate the Google way. That’s perfect if you’re making something for the Google ecosystem (or intentionally wanting to seem like you are). But it’s not a good fit when that’s not your goal. You wouldn’t use another brand’s colors or typeface on your product, so don’t just follow another brand’s motion guidelines either.

The most effective design systems contain a branded point of view unique to them — things that make their design system more specific to the product they’re for — along with common design best practices. Spend a little time researching and reading through other systems’ motion guidelines, and you start to get a feel for which parts are best practices and which parts are customized to that brand or product’s point of view. Then you can decide which best practices you might also like to include in your guidelines, as well as where to customize the guidelines for your product.

For example, using ease-ins for exits and ease-outs for entrances is a common best practice for UI animation. But the exact ease-in or ease-out curve is usually customized to a brand’s intended message and personality.

 

The Two Main Sections Of A Design System’s Motion Guidelines

There’s no specific rule out there stating that you must have these two sections, but I’ve found this breakdown to be an effective way to approach the motion guidelines I’ve worked on. And I’ve also noticed that most design systems out there that address motion have these two categories as well, so it seems to be an approach that works for others too.

The two main sections are:

  1. Motion Principles
    Principles are typically high-level statements that explain how that brand uses motion. They’re the big picture point of view or design intention behind why the brand uses animation and their perspective on it.
  2. Implementation
    This section focuses on how to carry out those principles practically in design and/or code. It serves as the building blocks of animation for the design system, and the amount of detail they cover varies based on brand needs.

MOTION PRINCIPLES

The principles section is where to state your brand values around animation. They’re the high-level principles to measure design decisions against, and a place to state some specific definitions or values around animation. Principles often tend to focus on the “why” of using animation within a particular design system and the UX-driven purpose they serve. In many cases, design systems list these under the heading of Principles in their motion section. However, you can see the concept of principles present in ones that don’t include a specific section for them as well.

Your motion principles can be modeled after existing global design principles that your brand might have, extrapolated from things like voice and tone guidelines, or even be inferred from looking at your product’s existing UI animations in a motion audit.

Let’s look at some examples to get a better idea of how these play out. Microsoft’s Fluent design system lists their motion principles as being physical, functional, continuous, and contextual. They include a short description and illustration of each to explain how it applies to UI animation.

Audi doesn’t have a separate principles section, but they start off their animation section with a declaration of why they use animation, which is setting the stage for what sort of motion is to be used in the design system, just like a principle would.

While developing the motion section for Spectrum, Adobe’s design system, we opted for a principles section to match the pattern used in other sections of the system. Within Spectrum, animation aims to be purposeful, intuitive, and seamless.

 

Source : www.smashingmagazine.com

Posted in Knowledge sharing | Leave a comment

A Beginner’s Guide To User Journey Mapping

‘How do people actually use our product?’ is a fundamental question that every product creator must answer. In order to answer this question, product designers need to understand the essence of the whole experience from the user’s perspective. User journey mapping is an excellent exercise that can shed light on that.

What is a user journey map?

User journey map is a visualization of an individual’s relationships with a product/brand over time and across different channels.

While user journey maps come in all shapes and formats, commonly it’s represented as a timeline of all touch points between a user and a product. This timeline contains information about all channels that users use to interact with a product.

What design problems user journey helps us to solve?

User journey map is an excellent tool for UX designers because

It visualizes how a user interacts with a product and allows designers to see a product from a user’s point of view

This fosters a more user-centric approach to product design, which ultimately leads to better user experience.

User journey map helps a product team to find the answer to the “What if..?” questions. Also, a user journey map can be helpful when the company tracks quantitative KPIs. In this case, a user journey map has an opportunity to become a cornerstone for strategic recommendations.

The 8-steps process of user journey mapping

Before creating a user journey map, it’s important to review the goals of your business/service. This knowledge will help you align business and user goals.

1. Choose a scope

The scope of the user journey map can vary from the high-level map which shows end-to-end experience to a more detailed map that focuses on one particular interaction (for instance, paying a bill).

2. Create a user persona

Who is your user?

A user journey map is always focused on the experience of one main actor — a user persona who experiences the journey.

User persona should always be created based on information you have about your target audience. That’s why always start with user research. Having solid information about your users will prevent you from making false assumptions.

Gather and analyze all available information about your target audience:

  • Interview your real or potential users
  • Conduct contextual inquiry
  • Analyze the results of user surveys

3. Define scenario and user expectations

The scenario describes the situation that the journey map addresses. It can be real or anticipated.

It’s also important to define what expectations a user persona has about the interaction.

For example, a scenario can be — ordering a taxi using a mobile app with expectations to get the car in 5 minutes or less.

4. Create a list of touchpoints

Touchpoints are user actions and interactions with the product/business. It’s vital to identify all main touchpoints and all channels associated with each touchpoint.

For example, for touchpoint ‘Buy a gift,’ channels can be — purchase online or buy in a store.

5. Take user intention into account

What motivates your user to interact with your product?

What problem are users looking to solve when they decide to use your product? Different user segments will have different reasons.

Let’s take an e-commerce website. There is a big difference between a user who is just looking around and a user who wants to accomplish a specific task (purchase a particular product).

For each user journey it’s vital to understand:

  • Motivation. Why are they trying to do it?
  • Channels. Where interaction takes place
  • Actions. The actual behaviors and steps taken by users.
  • Pain points. What are the challenges users are facing?

Tip: Ensure that the user is getting a consistent experience across all channels.

6. Sketch the journey

Put together all the information you have and sketch a journey in a format of step-by-step interaction. Each step demonstrates an experience that the persona has with a service/product or another person.

Here are a few tools that can be helpful during user journey mapping:

Tip: A tool called storyboard can help you show how users can interact with a product. Using storyboard, you can show visually what happens during each step.

7. Consider a user’s emotional state during each step of interaction

What does a user feel when interacting with your product?

Products we design need to mirror the state of mind of our users. When we consider a user’s emotional state, this knowledge will help us to connect with users on a human level. That’s why it’s important to add an emotional lane to the user journey map. By visualizing the emotional “ups” and “downs” of the experience you’ll show the areas of experience that require refinement.

Tip: Create an empathy map to better understand how the user feels.

8. Validate and refine user journey

Journey maps should result in truthful narratives, not fairy tales. Even when a user journey is based on user research, it’s vital to validate it. Use the information from usability testing sessions and app analytics to be sure that your journey resembles a real use case.

Gather and analyze information about your users on a regular basis. For example, user feedback is something that can be used to improve your understanding of the user journey.

Conclusion

It’s important to remember that the goal of creating a user journey map is to create a shared vision. That’s why once a user journey map is created, share it with your peers. Make it possible for everyone in your team to look at the entire experience from the user’s standpoint and user this information while crafting a product.

Source :  babich.biz

Posted in Knowledge sharing | Leave a comment

How to Create Information Architecture for Web Design

Imagine this situation: You visit a website and spend time looking for the information you need. You click one link, then another, and again, and again… But you come up empty — you can’t find anything useful. Whether you’re a product owner or designer, you don’t want your website to be a maze with nothing but frustrating blind alleys.

Information architecture helps to avoid this. It handles the chaos, creating a clear structure for a website, an app, or a program. In this article, we’ll explain how you can create superb information architecture.

What is information architecture?

When you arrive at a new place, you need something to guide you. If you’re spending a weekend in an unfamiliar city, you have to consult a map. Then you use street signs and addresses on buildings to reach your destination. It’s the same with any unfamiliar location: You don’t want to waste time and get lost, so you need a guidance.

Information architecture (IA) is the science of structuring content as it is applied to news websites or blogs, online stores, booking apps, downloadable software, etc. The goal of information architecture is to classify the content in a clear and understandable way and arrange it according to relations between the content pieces, allowing users to find what they need with less effort. Not applied solely when creating a product from scratch, IA is used in redesign.

Information architecture is a part of interaction design that considers content, context, and users. This means that user needs, business goals, and different types of content must be taken into account while structuring a product’s information. Usually, information architecture design falls under the care of UX and UI designers or an information architect.

Peter Morville, the co-author of Information Architecture for the World Wide Webexplains the role of an information architect as a person who bridges users and content by designing search and navigation, embodying the abstract ideas into prototypes, units, and disciplines to turn the concepts into something understandable. An information architect who works along with a UX designer can concentrate solely on information architecture design, while a UX designer devotes more time to research. In this case, an architect creates a number of deliverables, which we will describe in the section on the steps of IA development.

Regardless of the title, a person who works on information architecture must start with the rules that help to achieve the goal of IA. In the next part of the article we will look closer at the activities of IA design and its deliverables. To create a strong information architecture, you must start with thorough research, so it all begins with learning your users’ needs and behaviors.

1. Conduct customer research

The aim of this stage is to learn about a user’s needs. You must work with a customer profile and the results of customer and stakeholder interviews. The data revealed at this stage will allow you create a user persona profile, list business requirements, and get an idea of what a user wants. Because these tasks belong to a UX designer or business analyst, you need the results of their activities.

At the end of this stage, you’ll end up with a user profile and user flow that illustrate the way a user thinks and interacts with a product. When you have all the necessary information about the product and the people who use/will use it, you can go to the next step.

2. Update and review the content

When you know what a user wants, you can update the content of an existing website and list it. The main activities to perform at this stage are content inventory and content audit. Let’s look at them.

Content inventory

The goal of this activity is to create a list of information elements on all the pages of a website and classify them by topic and sub-topic. This includes the following items:

  • Headings and subheadings
  • Texts
  • Media files (images, video, audio)
  • Documents (doc, pdf, ppt)
  • URL-links of the pages

Content audit

Well, you have the content list. Now, scrap the least important items, update some pieces of content, and rearrange them for the next steps. This activity is applicable both to new products and to app or website redesigns.

The next step involves grouping content into different categories. For this purpose, you will need the help of potential users.

3. Apply card sorting for content classification

All types of content must be classified and have proper names that won’t confuse a user. You need a taxonomy to do it. Taxonomy is another word for classification. In the case of IA, it’s an attempt to group different unstructured pieces of information and give them descriptions.

The most popular and the most important technique that allows taxonomizing the content is card sorting.

Card sorting

As soon as you have the content, arrange it. The point of the activity is to see directly how users perceive the product’s content pieces. Card sorting is usually conducted in small groups of 15–20 participants, where they have to describe and sort 30–60 cards with pieces of information into different classes. The cards contain topics that must be categorized, or pieces of content that must be described.

There are three types of card sorting:

Open — for free labeling. The participants categorize topics as they choose and in the order that makes sense to them. This approach allows you to understand how the users think in terms of classification. Open type is used to design new products.

Closed — with pre-designed categories. This method of card sorting is usually applied in redesign. The participants are given pre-defined categories from a content inventory list, and they sort the content according to them.

Hybrid — unites elements of both types, or starts with an open type, moving to the closed type to follow user logic.

You can conduct card sorting in groups or as a personal interview, or remotely via IA tools like UserZoomusabiliTEST, xSort, and Optimal Sort.

The cards can be digital or physical, i.e. written on pieces of paper. When creating cards, use the results of content inventory. Separate topics have to be on separate index cards. They should have numbers and some should have blank spaces, so the participants can create their own names for categories. As a result, you’ll see the approximate structure of a product and proceed with the first prototypes. But first, the categories must be labeled and defined in a navigation system.

4. Build a website hierarchy for user-friendly navigation

Every website or an app needs a solid navigation system that helps a user find what they need. As soon as you have the results of card sorting activities, you will understand how to embody and classify the content in reality. This step embraces navigation design, labeling, and site mapping. Let’s define them one by one.

Navigation

When working on navigation, remember that no matter which pages the visitors come from, they must be able to find what they need. A navigation system consists of many elements — buttons, menus, and tables of content. There are four main type:

Hierarchical — shows the information hierarchy from main elements to their sub-categories. An example is drop-down menus for large websites.

Global or site-wide — present across all the pages, this navigation enables the users to get to the main page from every location, for example, left- or right-sided, top-centered, sticky menus, footers, or hamburger menus.

Local — shows the navigation of a specific area: a page or a part of a site and its content. It can be present in the form of lists.

Contextual — relates to specific content, like document, page, video-audio object, or related products. Remember to make a clickable logo that directs a user right to a homepage.

These types can complement each other, but the main principle of good navigation is to avoid overloading with guiding elements. Sometimes navigation can be present in the form of an interactive guide, tour, or tutorial. It can navigate a user through a multi-stage process or a complex website. You can decide on the best option for location and menu type by conducting an A/B and multivariate testing for conversion optimization.

Labeling

The correct label gives users proper conceptualization of the category they are dealing with. During this procedure, name all parts of IA with headings and subheadings. The purpose of labels is to attract user attention, giving a proper understanding of what to expect from clicking on a link. Examples are the best description, so illustrate your labels.

When navigation and labeling are ready, outline the whole structure, creating a site map. Site map creation can be preceded by a mind map. Let’s look at the role of mind mapping in this procedure.

Mind mapping

Mind mapping is a technique based on relations between different pages of a digital product with a detailed description of functionality. As a tool, a mind map is very useful for instruction, allowing someone to understand the structure of the content by logical sequence and to develop associations. Apply it to an app or a website to visually represent the entities of a product and follow the logical structure of the content.

With a mind map, you can start making a site map. But first, you have to choose the hierarchy design pattern.

Hierarchy design patterns

Design pattern is a way to structure the content. It allows you to choose the direction at the very beginning of IA building or website redesign activities. There are several IA design patterns, which we describe below:

Single page model — one that serves a single purpose, for example, downloading an app or providing contact info.

Flat structure — one with a linear hierarchy, where all the pages are equally important. This pattern is suitable for brochure-like websites.

Index pages pattern — consists of a home page and equally important subpages. This type is one of the most common choices for websites because it’s simple, familiar, and deep enough for most use cases.

Strict hierarchy pattern — similar to index pages pattern, but more branchy: Each subpage has one or more subpages. Strict hierarchy pattern is chosen by websites that have a large number of categories such as blogs, eCommerce sites, or media.

Co-existing hierarchies pattern — unites several types of hierarchies in case the information from one subpage overlaps the content of another.

As soon as you have decided on design pattern, you can apply it along with the results of card sorting in site mapping.

Site mapping

A sitemap is a way to illustrate the hierarchy of content and display navigation. The word sitemap is self-explanatory. It’s a map of the content and categories of a website.

On a sitemap, you visualize the whole hierarchy of content. You can make it on paper or using different tools like WriteMapsMindNodeScappleMindManagerXMind.

Show the sitemap to stakeholders and send it to developers so that they can understand what to do next: Are there any important changes that have to be applied before a product goes into production? Still, there is one more stage before production — prototyping.

5. Create a UI prototype for future development

Although a sitemap is the first prototype in information architecture development, you still have to create advanced prototypes by wireframing and data modeling.

Wireframing

While a sitemap is a scheme of content hierarchy, a wireframe embodies the final look. A wireframe is a schematic representation of a website or an app that displays the navigation and interface of a website. An IA wireframe shows all the pages and screens of a product, with headlines, tags, labels, and grey boxes where the content will be placed. It’s also the first draft of a digital product’s UI. This deliverable is a bridge between the information architect and a UX/UI designer. Using a wireframe, you can conduct user testing to understand if an IA serves its purpose. These test results will allow you to apply the changes before developers and UI designers start working on a product.

Wireframes are drawn on paper or using a special tool or a software like JustinmindWireframe.ccFluid UIBalsamiq, or Visio for creating digital wireframes, sitemaps, or high-fidelity prototypes. Wireframes are tested by users to define whether the structure is clear and concise.

Data modeling

The final step before development is data modeling: You can embody the content structure in data modeling systems. At this stage, you communicate the prototypes to stakeholders and developers to work on a product.

Usually, it’s done via wireframes or right through CMS (content management systems), supporting systems for content publishing, like SquarespaceWordPress, and Wix. Lay the content out via CMS and later use it as the platform for website development.

The eight principles of Information Architecture

No matter if you’re goal is to improve user experience of a website or create a completely new app, you must take eight principles into consideration.

These eight principles were defined by Dan Brown, a co-founder of EightShapes design company. An information architect should stick to them to build a product:

  1. Principle of objects — a content is a living thing with its lifecycle, behaviors, and attributes.
  2. Principle of choices — the pages of a product should offer a number of meaningful choices to users.
  3. Principle of disclosure — the users mustn’t be overloaded with information; show only enough information to help them understand what kinds of information they’ll find as they dig deeper.
  4. Principle of exemplars — the best way to describe the content categories is to show examples of the contents.
  5. Principle of front doors — assume at least half of the website’s visitors will come through some page other than the home page.
  6. Principle of multiple classification — offer users several different classification schemes to browse the site’s content.
  7. Principle of focused navigation — don’t mix different categories in your navigation scheme.
  8. Principle of growth — assume the content you have today is a small fraction of the content you will have tomorrow.

Applying these principles, you are likely to structure existing content and leave a space for growth.

Examples of information architecture

As you have already seen, almost every stage has its own deliverables. But the most important deliverable that unite the results of an information architect’s hard work is a sitemap. Now, let’s see how websites structure their content.

BBC Weather

First of all, it’s a part of the BBC news agency website, so in a way, it is also a part of a more global product. The information architecture of BBC Weather features a strict hierarchy design pattern with three hierarchy levels. The main categories involve forecast pages, UK weather, coast and sea, weather presenters, and story pages. A homepage features a map that sends visitors right to the cities they want and video. This IA allows a user to access the information from the home page.

Global Seed Network

The Global Seed network is an initiative that supports diversity and protects the public food system by encouraging farmers and gardeners to share seeds of different plants. The site’s information architecture has a simple navigation system and allows new visitors to sign up in two steps and find the available types of seeds right at the homepage. Also, the homepage features recent news. All this shows the visitors the advantages of an initiative and helps them to make a decision.

Spotify

This is an example of not-so-good information architecture. Spotify’s website features a co-existing hierarchy pattern with reiteration and partial reiteration of some sections. This makes the information architecture a little messy. Renee Lin, a UX designer, found a way to improve it by simplifying it and removing some sections.

Renee Lin, a UX designer, found a way to improve it by simplifying it and removing some sections.

Final word

One of the new trends in UX/UI design is zero UI. If you have ever used Google Assistant or Alexa, you know what it’s like: A user finds necessary information without even touching a screen, just by saying a couple of words or potentially even by a gesture. This is what virtual reality projects most frequently apply. Zero UI will influence the way information architecture is created. But as long as we have a regular UI, we must stick to some tried-and-true tips like adhering to the eight principles of IA and not overloading users with information.

Originally published at AltexSoft Tech Blog How to Create Information Architecture for Web Design”

Posted in Knowledge sharing | Leave a comment

Tips to Create Stunning Business Cards

If you want to position your brand, it’s not just enough to make a good face to face impression. Make no mistake. I don’t mean that face to face impressions aren’t important. But you often have to follow them up with a business card. As a matter of fact, a business card sometimes doubles up as a first impression and also as a follow-up reminder as to why customers should pay attention to your brand in the first place.

5 Awesome Business Card Design Tips

Experiment with Your Colors

Yes, you want your business card to right off the bat define your value and differentiate you from your competitors, but you also want to appeal to your client’s emotions. And nothing appeals to people’s emotions better than color. I’ll admit there are two sides to this argument. Some people believe colors draw people and appeal to their emotions while others argue that if you use the wrong colors, you lose your audience before you even get a chance to sell them your ideas. The jury is still out on this one. But the truth is color impacts everyone.

So you will want to get a deeper understanding of color psychology so that you can use that knowledge to predict people’s responses. For example, psychology tells us that black is somber color and is often associated with death. So if you want to make an impression, then you might want to use black sparingly or completely forget about incorporating it into your business card design.

In contrast, white sends a different message altogether. It says elegance. It says sophistication and is often associated with high-end luxury brands. On the other end of the spectrum, pink comes across as being more feminine. It represents sweetness, love, warmth, and sexuality. So once a customer sees a pink shade, it tells them that they can get female apparel and female necessities.

Switch Up the Texture

The card’s texture is a priceless business card design asset. You know how people are said to be visually inclined to like something from the onset. Well, the same principle applies to texture. Only that with a textured card, you are engaging multiple senses.

This means that customers can create more memories with your brand and will, therefore, be more likely to give you a call or make an order.

The question is: How do you give the card texture? Simple: change the paper stock. Instead of using convectional paper stocks, look for a more modern paper stock with a unique feel to it. Something crisp and witty but still professional.

Another way to switch up the texture is to go for an entirely new manufacturing material. This gives you the chance to surprise your audience in a whole new way since no one will be expecting a card made out of cotton, leather, wood, crackers or chocolate.

Use Unique Shapes

You may not realize it, but shapes have quite an impact on our daily lives. I mean think about it. There are shapes everywhere. And just like colors, they have their own set of psychological associations. So for instance, when we come across the octagonal shape on the road, our first instinct is to stop while the cross symbol denotes first aid. Again, you will want to do a little research into the psychology behind shapes so that you influence the correct response. After all, you don’t want to send the wrong message, do you?

Enhance your Layout

I’d venture to say that the business card layout is the most important aspect of creating a stunning card. That’s a pretty big claim, right? But it makes perfect sense when you think about it. The whole point of creating a business card is so that people can read it. If customers cannot read what is on the business card, it’s a complete waste of time. So you will want to ensure that you leverage the power of readability by enhancing the layout.

Space It Out

Very closely tied to the layout is space. Just as with any other kind of design, spacing up elements on your business card unclutters the card and gives a little more breathing space to enhance readability. However, remember you also don’t want to put in too much white space and make it seem like elements are floating all over the place. You will need to ensure that there’s a balance to ensure cohesion.

Wrapping It Up

There you have it, folks! A comprehensive blog post on what you need to create stunning business cards. Of course, there’s a bazillion of other tips I could have included, but these are the most important yet. Be sure to leverage different colors and creative textures to come up with a better business card design for your card. Also, ensure that you enhance the layout and space out elements for maximum readability.

 

Author : Mirko

Source : www.designer-daily.com

Posted in Knowledge sharing | Leave a comment