UX Archives - Page 3 of 4 - Galaxy Weblinks

Customer Journey Mapping For Better Website Performance

Posted on December 14, 2020October 10, 2024 by galaxy-admin

The most important question that project managers should ask themselves is, “How do I help my customers achieve their goals on my website while still achieving mine?” Focusing on that question is the starting point for improving your website experience and building a customer journey map. The first goal for preparing a customer journey map is to identify the customers’ requirements and what they are seeking using your website. Your team (Designer/ Developer/ Tester) should understand the entire process your customers go through.

The Journey Phases

This implies the different stages in the customer’s journey. They may vary as per particular scenarios. Each company can use data to analyze what these phases are as per the corresponding situation. Here are some examples:

For a B2B scenario (like rolling out an internal tool), the stages could be purchase, adoption, retention, expansion, advocacy.
For a big (or luxury) purchase (like test driving and buying a car), the stages can be engagement, education, research, evaluation, justification.
For an ecommerce scenario (like buying Bluetooth speakers), the stages can be – discovery, try, buy, use, seek support.

This will help you determine your journey phases according to your business type. There’s a common saying that you can’t understand someone until you’ve walked a mile in their shoes – and that’s exactly what customer journey maps do. They help you put yourself in your customers’ shoes and understand your business from their point of view. Based on this rationale, you can’t deny the importance of a customer journey map. Thus, we’ve created the following steps for crafting the best map to help your company website improve.

1. Set clear objectives

Before you can dive into creating your map, you need to ask yourself why you are making one in the first place. What goals are you directing this map towards? Who is it specifically about? What experience is it based upon? You can start by writing down the objectives on sticky notes or use a customer journey template. A customer experience map will help you narrow down one specific interaction with your business. You can have individual customer experience maps for each of the following scenarios of your business:

Reading your blog or exploring your website
Interacting with a customer support agent
Visiting your store or your ecommerce site
Using your product at home or work
Interacting with sales during the process of becoming a customer

2. Profile your personas and define their goals

Next, you should conduct research. Some great ways to get valuable customer feedback is through questionnaires and user testing. The important thing is to only reach out to actual customers or prospects. You want the feedback of people who are interested in purchasing your products and services and who have interacted with your company before or plan to do so. TIP: It’s best to pick your most common customer persona and consider the route they would typically take while engaging with your business for the first time. You can use a marketing dashboard to compare each one and determine which would be the best fit for your journey map. Don’t worry about the ones you leave out, as you can always go back and create a new map that’s specific to these customer types.

3. Monitor how your customers move on your site

It’s important to understand how users move through your website. For example, if you’re offering a discount code to all first-time visitors, then why is the sales low? The offer (or, ability) might be great, but consumers still lack the motivation to buy. In this case, it doesn’t matter how much products are discounted. This common scenario can be uncovered with the Behavior Flow report from Google Analytics. Make sure to examine different segments of users, whether it’s first-time visitors, returning visitors, purchasers, or create a custom segment for visitors with long session durations but no purchases: Google Analytics: Behavior Flow Look for trends, like specific drop-off points were so many users are leaving your site without converting. What page do most first-time visitors view after landing on your homepage?

4. List out all the touchpoints

Touchpoints are all the places on your website that your customers can interact with you. Based on your research on Google Analytics or basic research on your CMS dashboard, you should list out all the touchpoints your customers and prospects are currently using, as well as the ones you believe they should be used if there is no overlap. Apart from Analytics on your website, you need to determine how your customer might come across you online. These might include:

Social channels
Paid ads
Email marketing
Third-party review sites or mentions

This is an important step in creating a customer journey map because it gives you insight into what actions your customers are performing. If the number is more than expected, it is likely that your website navigation is complicated. However, if they are using fewer touchpoints than expected, this may imply that they are not convinced with your offerings and may leave the website early.

5. Map the pain points

Go back over the map and jot down pain points on sticky notes. Place them underneath the corresponding touchpoints on the journey. For added value, talk about the impact of each pain point. Is it trivial, or is it likely to necessitate some kind of hack or workaround? Even worse: does it cause the user to bounce off the website and leave their journey entirely? Get to know what roadblocks are stopping your customer from making their desired action.

6. Improvement Ideas

Start by prioritizing which touchpoints or pages to address first. You can rank pages by cost-effectiveness and or how easy they are to change. Improvement ideas are usually integrations, services, or features that we can enable. Then, it’s a matter of determining what to test. For instance, if research suggests that customers worry about getting locked into a particular plan after they sign up, tweaking your copy on a relevant page could minimize their hesitations.

Conclusion:

Once you have a better understanding of the customer journey, you can use that knowledge to improve your site by honing your messaging to match customer needs, smoothing out frustration points, eliminating extra steps, and even creating content. This will ensure your website is providing a seamless and effective interaction for customers, which leads to a better user experience. The companies need to anticipate the routes their customers may take, and optimize their customer experience along the multiple touchpoints rather than relying on one assumed journey. About Galaxy Weblinks We specialize in delivering end-to-end software design & development services. Our digital product designers are creative problem-solvers with a decade of experience in all facets of digital and interactive design. We create compelling and human-focused experiences delivered through clean, and minimalist UI.

A Guide to UX Design Deliverables

Posted on November 25, 2020October 10, 2024 by galaxy-admin

UX deliverables are a key part of building any application/product or enhancing an existing one. They may vary depending on the methods used, project, budget, and user demands, as every product is different. This, in turn, also impacts the communication between the designer and the client. Early on in the project, before the designer can share a mockup or prototype, it is common for designers to wonder what to share with clients and how often.

‘What do I show to my clients? What do they want to see? Are they concerned about my work process? When to be an open book and when to keep things to myself?’

This article lists the 7 most common deliverables created or produced by UX designers while making a new product.

These deliverables are ‘good-to-have’ in any and every project. They keep designers on track while ensuring that the clients, project managers, and designers are on the same page.

UX deliverables provide a clear foundation to build your designs on when you’re elbow-deep in developing your application, site, or any product.

Competitive Analysis Reports

An analysis of competitor’s products to map out their existing features in a comparable way. It helps UX designers to identify opportunities to innovate in a given area and understand industry standards.

Tip: A useful starting point for identifying strengths and areas for improvement is user experience heuristics. Heuristics include readability, consistency, clarity of text and labels, efficient navigation, etc.

Personas and UX Research Reports

With personas, you can easily empathize with users throughout the design process. The most effective personas are created from observation data and in-depth user interviews of real users. A good persona supports the UX research group!

The user research reports help in communicating research aims and methods, as well as getting buy-in from stakeholders. It’s also a great tool to translate the research findings into actionable items. They help in keeping everyone on track during the research project.

Pro Tip: There are many types of user research tools and techniques available like QuestionPro or LimeSurvey (survey tools), and FullStory or Hotjar (user session recording tools).

User Flow Diagrams and Product Roadmaps

Sketches are simple depictions of a design concept. They can be quickly employed because only paper and pen are necessary for their creation. They are also easily shared between designers and also between users and developers.

Similarly, a product roadmap is a product’s evolution plan with prioritized features. It could be sticky notes, a diagram, or a spreadsheet. UX designer shares the product strategy with the team that needs to be applied to achieve its vision.

Tip: Limit the number of decision points to make it clutter-free/ less complicated. Make sure the scope of the user flow diagram covers a single goal or a single task of your user.

Static Wireframes

Showing your client a visual before you get into the details of the design can save you a lot of hassle. Draw a wireframe in a notebook and take a snapshot to share with your client or use tools like Figma, Invision Studio, etc. Their main purpose is to display the arrangement of the content, expected user behavior, features, and website layout.

Wireframes can also be presented as digital illustrations that represent the organization of the website/app. They can be particularly beneficial in saving a lot of time and money because they are easy to make and adjustable to work with.

Tip: If you plan to present a wireframe to the team, try to keep Wireframes simple and include annotations that help to create context and quickly deliver key ideas.

Interactive Prototypes

With tools such as Figma, Invision, and Adobe XD, the interface design level deliverables include interaction prototypes by default. Static images just cannot convey that interaction feeling. You’ll always find many small interactions or design adjustments only after you build the interactive prototype.

An internal review of a product prototype allows everyone on the team to see how things will work, and how an actual user interacts with it. It also helps users test a product that feels 100% real, provides ideas, and gives valuable feedback.

Tip: Test prototypes on real devices as much as possible, as nothing can replace experiencing designs better on a real device.

Mood Board and Visual Design

Have you ever heard from your client wanting a site that was ‘edgy, yet safe, but also cool and blue, but not icy or depressing hospital-scrubs-blue’? A mood board is a great tool for checking that your idea of the site’s look and feel matches your client’s.

Visual design is the last step before handoff to developers and the phase where a style guide and final specs are crafted. UI style guides are generally a series of guidelines or visual references or component libraries to help designers define or set the typography, UI elements, and interactions. This ensures product consistency across different design teams, companies, and brands.

-Combined design inception worksheet

Tip: Mood Boards should be visually stunning collections of ideas, full of textures and images that transform your pitching experience at the start of a project. Whereas, a design style guide can be generated in a few seconds from Sketch, and design-handoffs can be possible easily with Zeplin.

Hopefully, you now have a good idea of what a UX designer has to deliver or communicate with stakeholders.

If you’re thinking ‘we do not have enough experience to deal with this’ or “what if I don’t have enough time”, contact us to get a free UX consultation.

About Galaxy Weblinks

We specialize in delivering end-to-end software design & development services. Our UI/UX designers are creative problem-solvers with a decade of experience in all facets of digital and interactive design. We create compelling and human-focused experiences delivered through clean, and minimalist UI.

A walk-through of different user onboarding UI patterns

Posted on October 27, 2020October 10, 2024 by galaxy-admin

There’s a popular user experience quote: “A user interface is like a joke. If you have to explain it, it’s not that good.” While clever, that statement is far from the truth.

We agree that user interfaces shouldn’t be complicated. On the other hand, you can’t expect a new user to understand a new interface without any direction. That’s where user onboarding flows come into play.

This also stands true for the existing users who need directions to understand an updated interface or a new feature.

In this article, we will discuss those onboarding UIs that will help both new and existing users understand features – breaking the myth at the same time that user onboarding begins and ends with the first experience.

We’ll be discussing UI patterns like tooltips, hotspots, modals, etc. that have roots in specific types of “popup” window situations and are popularly used interchangeably in general web conversation.

Each of them offers some common purpose:

Contextual help: Offer helpful hints and support in the context of your product.

New feature Announcement: Draw attention to a new feature without interrupting a user’s workflow.

Influence User behavior: Gently nudge users to explore, learn, or take action.

When used correctly, they can be powerfully engaging. But when used the wrong way, they can feel like spammy popups that disrupt the user experience – ultimately causing users to churn.

It’s important to find the right balance between communicating with your users and just letting them do their thing. With that in mind, let’s discuss what they are.

In-context Tooltips

As opposed to a ‘first look’ experience, these tips appear as the user explores the product that can either explain the value of that feature/section or explain how to use it.

This technique waits for the user to take an action and presents the value right then and there. Similar to the tour, it is usually implemented as an overlay. Here is a list of 5 mistakes that you can avoid to boost feature adoption while designing tooltips.

Pros: The tooltips are in-context, so it solidifies the feature-value pairing, reducing cognitive load. This can also be created with 3rd parties like Appcues or Chameleon.

Cons: Some might never get discovered.

Popup Modal Window/Lightbox

A modal popup is great for announcements and situations where an action is encouraged, but not required. As with every customer communication, the information should be valuable and timely.

While some users may be in the habit of avoiding anything that pops up, embedded UX patterns could be something users look forward to when used the right way.

It’s similar to a lightbox that is used as a generic term for any popup that darkens the website and displays a dialog containing an image or other content. Often used to display galleries or content that should temporarily take complete focus from the rest of the page.

Generally, they can be dismissed with a cross button or by clicking anywhere in the darkened part of the page.

Gmail’s simple onboarding flow offers a good example of an effective modal window that creates delight, rather than frustration.

Pros: Immediately requires a CTA, the intended action is clear and direct.

Cons: Can often be a little intrusive.

Hotspots

They work similarly to tooltips. Some apps skip product tours and welcome screens and opt to show people tooltips and hot spots instead.

The goal of this user onboarding technique is to point out to users the certain features that play a key role in the user environment, even without noticeable warnings.

Pros: Allowing customers to explore functionality at their own pace and when they need to use different parts of the app makes this an excellent onboarding strategy. Especially for users switching from a different platform for the same product.

Cons: Users might get annoyed if you are using more than 3 hotspots on a screen.

Blank Slate Tips

Think of every not-yet-populated section/view of your product as space to nudge the user to create content. Use that space to educate the user on what type of content goes there, how to add it, how long it might take, and what value it will add.

Pros: It’s a great use of negative space. It’s persistent until they replace it with content. There’s nothing more daunting than a blank piece of paper! It leverages people’s completionist tendencies.

Cons: It might not be enough on its own.

Conclusion:

It’s important to find the right balance between communicating with your users and just letting them do their thing.

Put careful consideration into the “when” and “why” of your mobile tooltip design. Remember, tooltips are annotations – they should add value to the user experience, not overpower it.

There is no “right” or “perfect” user onboarding flow. What works for one site/product/app might not work for another. What works for one user might not work for another.

For example, you might need to onboard a developer vs. an average user.

Designing a user onboarding flow that works is complicated. It involves a lot of research, testing, and optimization.

Contact our UX design experts to shorten your users’ time-to-value, get them to that ‘aha moment,’ strengthen your brand, and do it all fast!

About Galaxy Weblinks

How to get Bidirectional Scrolling right in your responsive design

Posted on October 12, 2020October 10, 2024 by galaxy-admin

Incessant scrolling while using an application is perceived as a flaw on both mobile and desktop. To address this concern, a shift to horizontal scrolling of elements is in trend now.

We are seeing an increase in designs using non-breaking lists that are scrolled horizontally for more content especially on mobile, where horizontal space is limited.

On the other hand, vertical scrolling works as a mainstay of virtually every digital interaction you’ll come across.

A few years ago, the users used to remain reluctant to move sideways through content. However, the users have evolved since then and are more receptive to the idea of scrolling in both directions. It is more preferable to scroll through vis-a-vis clicking multiple pages or screens. Scrolling is completely natural and more efficient.

Users have learned to scroll. Never-ending newsfeeds and content have taught this interaction to users over and over again. In a mobile-first world, scrolling has become the number one interaction with digital content.

Users are impatient. They don’t wait to get a page fully loaded to scroll and discover the content later.

Although, the whole shift has led to the challenge of designing a smooth bidirectional scrolling experience without compromising the responsive design.

Creating desktop and mobile experience a mess while trying to ensure the same user experience
Hiding content behind menus
Having to scroll down and across in a zig-zag fashion
Taking more clicks (or flicks) to horizontally scroll the content into view on desktop

Here are two best practices for bidirectional scrolling to figure out when horizontal scrolling is great for UX:

Horizontal scroll works best when you want to display a subset of a category

Websites like Netflix have been using the responsive principle to showcase huge libraries in a way that lets you get to what you’re interested in extremely quickly.

Even e-commerce shoppers are scrolling more frequently than ever and are doing a great job when it comes to responsive design.

Image source: Vlad Ermakov for widelab

You’ll see a section, and there’s a plethora of content towards the right if you keep scrolling. When you scroll down, it’s just one line for each topic or section, making it easy to get to what you want quickly, then scroll to the right to dive deeper into that section.

The main principles that these sites have in common and have seen success with are:

Displaying a large catalog of products or items so that different product categories can be easily shown.
Displaying discrete sections or slides of information on applications like recommended or similar products on e-commerce websites.

Make your navigation more obvious and attractive

This seems to be the biggest problem faced by visitors when it comes to horizontal scrolling based websites. Even those that look incredible can end up confusing and turning off their users. That will result in leaving your website and finding one that is easier to get around on.

So navigation should be clear and easy so that your users don’t have to sit on your page for too long trying to determine how to get somewhere.

Make sure there is a visible label, and easy to use menu options of some kind that will get them to the information they want, especially about the bidirectional scrolling at the home page.

“Users are encouraged to scroll when it’s easy for them to see what is visible on the page without even requiring any action.”

If you fail to provide the right e-commerce site elements and above the fold and create an enjoyable digital shopping experience, you’re going to have difficulty getting shoppers to scroll.

The honest truth is that you need just the right mix of vertical and horizontal scrolling.

Conclusion

There is a lot of debate over the internet about the usage of the bidirectional scroll and its impact on UX. But it helps a lot in compartmentalizing the content and saves a lot of vertical space on an app if used wisely.

If your app and website are struggling with responsive design issues, feel free to contact our experts.

About Galaxy Weblinks

We specialize in delivering end-to-end software design & development services. Our design process stems from an agile and a responsive digital development that incorporates effective collaboration, streamlined projects which strives for better results.

A comprehensive guide to Mobile App Design

Posted on September 2, 2020October 10, 2024 by galaxy-admin

2.56 million and 1.85 million.

According to Statista research, these numbers are the number of applications available on Google and Apple’s app store, respectively.

Each one of these applications is trying to solve a problem. Problems like payment friction, learning, boredom, and whatnot. A million solutions for billions of smartphone users.

But, bear in mind that a problem can be approached in numerous different ways and not all solutions are up to the mark. Most of the apps are not thoroughly researched or planned and hence lack in UX, functionality, optimization, etc..

Having delivered 80+ successful enterprise and user-facing apps, we have learned and curated a set of best practices that help us deliver flawless mobile solutions. Here’s a comprehensive guide to Mobile App Design.

Establishing the ‘Why’ of your app

Yes, this is an obvious one! Some things that will be established after you have had your ‘eureka’ moment. Meaning, you know that you have to design an app that will solve your user’s problem with ease but you need to dive deeper.

To facilitate this, answer all the questions below before you jump in the design and development phase:

What is the problem that you are trying to solve for your users? (like assessing users mental health)
Can you define your app’s aim in a single sentence? (This will give you a precise answer to the question above)
How do you plan on solving the problem from your user’s viewpoint (and not yours)?
What is your USP?
How many competitors are there in the market and how do you plan to differentiate your product offering?
If your idea is unique, how do you plan on educating your potential users and convincing them to download your app?

These answers will lay the groundwork for your app thus it’s vital that they are clear and understood by all your team members. Write these answers, print them out, paste them in your office, but ensure that everyone is on the same page.

You can always go back to the answers in case there is a detour in your journey.

Creating a functional design

Now that there is crystal clear clarity (pardon the alliteration), it’s time to design your app. You should start with wireframes and prototypes for validating your idea. Some tools that will help come in handy are:

Sketch
Axure
Miro
Adobe XD

People spend the majority of their time on mobile apps. This implies that the users are hooked to a certain set of apps. How to get in this inner circle?

A clean, simple, and intuitive UI is the answer. This seems a bit vague so let’s define some tips and methods that will help us here.

Storytelling via your UI

We all love stories and mindful endings. And this can be done via your copy, illustrations, animations, etc. Storytelling will help your users share your vision and have better clarity of why your app exists.

Make your UI copy conversational and avoid jargon at all costs.
Leverage tooltips for better engagement.
Be clear when sending out an error message. Pinpoint whatever is wrong or missing.
Come up with a pleasing onboarding process

Thus you can humanize your app via a story and it gives the users a chance to look into the vision that you have for your app.

Familiar App Navigation

Design your app in such a way that your users need no additional directions to navigate your app. We do not imply that you should copy from competitors. Rather, look out common practices that your user is habitual to, irrespective of the app category.

Stick to using UI elements like hamburger menu, tabbed navigation, or skeuomorphic icons, and so on. The aim is to avoid surprising your user on every click.

Keep in mind how people hold their phones

We all hold our phones in many ways. Holding it in both our hands in landscape mode, holding the phone in one hand and using the thumb to scroll, using both hands for operating, etc.

Whichever the way, ensure that the vital interaction buttons are within the thumb’s reach and not in the stretch zone. Place the key functionalities and information somewhere in the center. And no elements are hidden behind fingers and palms.

Touch targets

According to MIT’s Touch Lab’s Study, 10mm by 10mm is the minimum touch target size. We have to design for fingers and thumbs, not for cursors.

You can increase as per your need. Say if you are focusing on the elder demographic via your mental wellness app, it would make sense to increase the touch target’s size.

Also the spacing between touch targets should be adequate. They should not be so close to each other that it leads to wrong selection.

Use Established Gestures

Using the same gestures may seem like a creativity barrier but if you don’t do this, your users will suffer.

Scrolling up and down, pinching for zooming in and out, etc should be used wherever possible. Also if you do wish to deviate a little, inform your users and even better demonstrate it for them so that there is no confusion.

You can also test this in your hi-fidelity prototypes to see if your users are struggling with understanding and using the different gestures.

Consistent layout

Consistency is the lifeline of good design. You can design such an app via:

Visual hierarchy and weight via color play, typography, size, etc.
All your interactions, gestures, navigation should follow the same pattern throughout your app.
Your design should look the same across varying screen sizes and platforms.
If you have a live website, you should aim for a similar-looking app.

Easy Onboarding Tour

As mentioned early, your onboarding is a chance to curate your story and present it to your users. Don’t miss out on this.

You should not overwhelm your users with all the information in one go. You will turn your users away even before they complete the onboarding. Your tour should be a progressive one, encouraging users to keep moving on.

Break the information into smaller sizes for easy remembrance. And give the option to skip and resume the tour as per the user’s convenience. This gives the user the control and thus motivates them to interact more.

Keep the sign up simple and give the option to login via social media accounts. If possible, ask users to sign up in the later stages of onboarding. This way you get to highlight your value beforehand, thereby reducing the churn rate.

You will also need to take care of these practices –

You should have in-app search functionality, especially for ecommerce websites with huge product offerings.
Deter from asking unnecessary permissions. Continuing the above example of a mental wellness app, asking access to messages and contacts may not be well received by the user.
Minimize your user’s input. Enable autofill for your forms to speed up the signup process.
Keep your notifications to a minimum. Frequent notifications are annoying and may result in the users switching off the notifications altogether.
Optimize your app for voice search.

Your app should be designed in a way that your users do not think about the design of your app rather they focus on its functionality.

Testing Your App

Once you have invested your time and effort into designing and developing your app, you should test your app’s beta version on a focused group. Ask them for their honest feedback and improvement areas.

You have to test for your app for:

Functional testing for seeing the working of the functions and features.
Performance testing under different network bandwidths, older mobile devices, and servers.
Accessibility compliance
Interruption testing for how the app behaves upon incoming calls, notifications, low battery warnings, any cable attachments or detachments, etc.

Ready, Set, Release

After you ensure that your app is good to go out in the app world(s), sit back, and hit the launch button.

A side note here, things may not go as expected post-launch, so you need to have an open mind and pay heed to the feedback from your real users.

We, at Galaxy Weblinks, have been on this rollercoaster ride of app design, development, and release a good number of times, in case you wish to talk to us about your app and even new ideas, you can get in touch with us here.

5 Useful Tips For UX Designers

Posted on August 5, 2020October 10, 2024 by galaxy-admin

How often does it happen that we put in days and weeks in designing the perfect UI design thinking that it will be a user delight.

But when the first analysis comes in, the numbers paint a different and a rather disappointing picture.

Every UX Designer under the sun has gone through this situation. Sometimes an overabundance of creativity can make us overlook the default practices.

In one of our previous blogs, we talked about the layout fundamentals that will ensure an attractive UI design. Taking that thread ahead, this article would highlight the UI tips and tricks which will work in improving your overall design.

Recognition Over Recall

In Jakob Nielsen’s 10 usability heuristics, he recommended recognition over recall.

For instance, it is much easier to recognize the skeuomorphic shopping cart icon when shopping online because it is easily relatable with our regular shopping experience. If we try to replace this shopping cart icon to another icon, say cards (signifying payment), it will be hard for the users to recognize and relate to it.

The recognition time is much shorter than the recall time due to the simple fact that our brains are wired to recognize the things that we see frequently as against fairly new ones.

Use industry standard visual cues, layouts, patterns when designing tooltips, icons, buttons, etc.

Give Feedback To Your Users

Just like we accept a response from the person we are in conversation with, the same goes when interacting with websites and apps.

Additionally, the absence of human interaction on the web necessitates a response for letting your user know what’s going on.

Common feedbacks can include:

A single change in color of interaction buttons
Letting your users know how much the load time is
Their progress on the tutorial and the product tour (if any)
Letting them know the exact requirements when creating new passwords
Pinpointing the error when filling out long forms

You can leverage microinteractions to keep your users engaged. Microinteractions are the cherry on top of your beautiful UI (that is if you like cherries :p).

Rotating buttons, color changes, different cursors when on links, etc are all great and subtle examples of microinteractions.

Design An Intuitive Navigation Route

This may sound a little vague so allow me to elaborate.

When we say intuitive navigation, we refer to the predefined routes and interactions that a user is likely to take. When your users pause to understand a certain function or take time to complete any task, look into the navigation route again.

Try to point out why your user left your website or app in the middle of the product tour. Were they given the option to skip the tour or they simply abandoned it in between?

Was there something that distracted your users? Perhaps they got confused because of the different elements present, etc.

We recommend that you try to anticipate where your users can get stuck and change it accordingly.

The idea behind an intuitive design is that it confers to the established patterns of the industry or from the market leaders as well.

Let Your CTA Stand Out

This should ideally be a given while designing a winning UI. However, there is a big possibility of missing out on this one when you are in the flow.

We recommend that the CTA should be the most highlighted element on the page. You can do this via color play, text labels, font, and varying size, white space, etc. There should be no other element more enticing than your CTA.

Another point to keep in mind is that the CTA copy should be short but concise. CTA, in our opinion, should not exceed 5 words (ideal limit being 3 words). Avoid multiple CTA, for this reason, read the point below.

Limiting Your User’s Cognitive Load

What do you think is easier, ordering from a 3 items menu or 30 items menu? For most of us, it would be 3. When offered with multiple options, the human brain tends to be indecisive.

Also, according to psychologist George Miller’s theory of chunking, humans’ working memory is capable of handling seven plus or minus two “chunks” of information.

When we tend to put a lot of information out there, the majority of it is bound to be forgotten by your users and even overwhelm them. Thus, why not limit it from the beginning itself?

You can always try to break down all your information into simple forms or categorize them to reduce crowding on any given page.

We know how difficult it is to design something that resonates with a wide demographic and we also know for a fact that it’s impossible to please every single one of your users. These tips will ensure maximum engagement and stickiness.

And if you want the UI/UX specialists to analyze and help revamp your UI then get in touch with us here.

Instagram Made Me Rethink About Touch Targets

Posted on June 25, 2020October 10, 2024 by galaxy-admin

I’m sure you might have come across numerous articles on the web that talk about why we need adequate touch targets for each interactive element on any touch-based interface. (Especially mobiles which have a relatively smaller landscape.)

A ‘touch target’ refers to the area associated with an element that triggers the interaction when users tap on it. This area usually extends beyond the visual shape of an element when it isn’t an explicit part of its design.

Have a look at these two buttons, for instance; one is filled while the other is just textual.

Even though the button on the right does not have a visual shape like the other one, its touch target (although not explicitly visible) extends way beyond the text area.

Ideally , these touch targets should be at least 1cm x 1cm (or 38px x 38px) in size, as suggested by Nielsen Norman Group, to promote better capability for users.

Now, I’ve been an avid user of Instagram - which I’m sure you may know, has been one of the world’s most popular apps for quite a long time now - and lately, it struck me that most of the elements on its interface do not follow the common norms for touch targets.

Have a look at this shot, for instance.

Horizontal spacing

In the first highlight, you may notice that all the tags are very close by with hardly any horizontal space left in between. When tags are relatively long, they are much easier to tap on even if they are set close to each other.

Vertical spacing

This type of spacing is usually more concerning in the case of small screens, as no matter how big an element is horizontally, if it is stuffed tightly between two other interactive elements, it’ll be difficult to tap on it.

The same is happening with elements in the second highlight. The action to ‘view comments’ and the ‘profile names’ are very closely stacked.

Another example would be the location link just above the picture in the shot below.

Despite all the discrepancies in spacing, I do not remember a single instance wherein I tapped on an element which I wasn’t intending to tap on!

And I think most of you guys did not, either. Unusual, right? Considering how tight those elements are spatially.

This leads me to believe that the area that we cover when we tap is not that large, after all.

The bigger yellow circle has a dimension of 1cm X 1cm (or 36px X 36px), while the smaller oval (formed by tapping with the right thumb) is 24px (or 0.6cm) long and 15px (or 0.4cm) high - which is essentially how much area we cover while tapping - and it may even be smaller.

If we go by this logic, maybe we can mend our designs to fit more content in a relatively small landscape without sacrificing accessibility… or not? I’d love to know your thoughts on this.

7 layout fundamentals for that oddly satisfying UI

Posted on June 24, 2020October 10, 2024 by galaxy-admin

We all love harmony in our lives. Harmony of tones and hues, of perfect shapes and negative spaces. Be it in music, interior design, or on the dense pixel sheet of our workstations.

Often times this harmony is disturbed by all-out arrangements of elements, essential or not, in tiny places. Resulting in claustrophobic or anxious experiences, like the one we have at a cluttered desks or rooms.

And you most certainly don’t want your users to feel that way about your app or website. A good visual hierarchy which takes spacing, fonts, colors etc, all into consideration helps in coming up with consistent and clean UI designs.

To ensure that users don’t abandon your websites citing cluttered design or app as the reason, here are some layout fundamentals that will help you in creating an eye pleasing design.

Use Grids

We all started learning numbers by writing them in square grid notebooks and continued using it for handwriting practices as well. Grid style is implanted in our minds without us being aware of it. Even painters don’t shy from using grids as an assistance to picture all the elements of a painting.

It helps in accurate spacing out and ‘social distancing’ of interactions, images and content within your design. The grids are not visible to your users, but anything out of alignment will catch their attention first (unless that is your intention). Thus, designing without grids will lead to inconsistent design.

A popular argument against grids is that it limits the creativity space of the designers. However, we believe in deploying grids from initial phases itself, and then move 1-2 elements which we want to be the spotlight. This ensures consistency among our designs and at the same time, we are able to get the users attention in a short span of time.

Scanning patterns

Many studies have confirmed that we scan content or texts from left to right and in patterns, the most popular ones being ‘F’ and ‘Z’. Your users do this to find information which is relevant and interesting to them.

‘F’ scanning pattern is subconsciously carried out in cases of content heavy websites like informational ones, news and magazines, blogs etc.

‘Z’ scanning pattern is done which has lesser content and which require less scrolling.

Once you know your visitor’s attention points, you can place your CTAs, value addition information and interaction buttons accordingly.

White space

Negative space or white space is a vital component of visual hierarchy. White space helps the users in accessing an element’s importance. If there is a lot of negative space around an interaction, users by default perceive it to be significant.

Adequate usage of negative space will ensure that your users follow the pathway you designed.
Negative space will help in drawing your user’s attention to the elements of your choice and will increase the engagement rates of your website.

Spacing out the elements keeping this in mind will assist in creating a visually pleasing design.

Typography

Remember those calligraphy classes our mothers insisted on for improving handwriting? Don’t know about the handwriting, but calligraphy letters sure did look great on paper!

And yes, there is a difference between calligraphy and typography but both work on taking your content to the next level in terms of presentation and visual aspects.

Your content copy is what will your user understand about you and your organization. It will communicate who you are and what value you will provide to your customers. And the right typography will ensure that your users focus on the text written and have no criticism for the font selected.

Typography in practice is not choosing fonts or making fonts, it’s about shaping text for optimal user experience- Oliver Reichenstein

Using too many fonts can be distracting for the user. Instead use color, alignment, size and smaller variations to align with the importance of the copy you wish to highlight.

Golden ratio

The golden ratio, 1:1.618 is a mathematical discovery. But in design, it showcases the best proportional size of the elements and helps in creating an eye pleasing website and apps.

It can be applied to every element of your design right from white space, buttons and interactions size, typography, images and icons.

The overall design should also be in this proportion. Applying this ratio, ensures harmony and reduces any clutter or visual noise in your design.

Color Play

There are hundreds of emotions and moods connected with colors. The good (or bad) thing about colors is that they run their own show. Meaning, each color has a defined effect, the bright ones taking the center stage themselves, while the dull ones remain backstage.

Here also, taking too many different colors can strain the users eye and ruin the virtual experience. Colorful things do attract people but only to a certain point.

Even if you do wish to experiment with colors, you can come up with a color palette having a mix of colors belonging to a similar color family.

For interactions like CTAs, buttons, you can opt for bright or dark colors for getting your user’s attention. You can always play with the brightness, hue and saturation of the colors for establishing visual hierarchy.

Size

Any large object put in an empty room is bound to attract visitors, moving past all the other objects. The same applies to your virtual contact points.

Size of icons, buttons, images, logos, interactions will be the deciding factor for all your users. Starting with larger objects, designers then size down as a visitor scrolls down the page.

A side note here, once the largest object is fixed, other elements should have a considerable difference in their size, otherwise there the design will become cluttered.

All the points mentioned above, when stitched together, build an UI that enhances your user experience by laying the foundation of a good visual hierarchy. Missing out on any points will lead unnecessary visual noise.

A good design is when your user is not bothered by your design in the very first place. Looking for a partner that can do the same for you, talk to our designers here.

How we make remote design sprints work?

Posted on June 9, 2020October 10, 2024 by galaxy-admin

In an ideal scenario we would all be working alongside our teams in our lovely workspaces built for maximum productivity and collaboration. But since that is not the case and will remain unchanged for a while, the only option is to adapt. Considering the circumstances our design team like every other team has gone completely remote and to be honest, it’s not easy.

But processes help. Here is our process laden with some good practices that helps us retain our productivity in a remote environment.

There are numerous questions associated with the who, what, and how of collaboration. Like, who all should be included, how to manage the time zone differences, which tools and exercises to be conducted, and lastly, is it even possible?

We will address the simplest query first – Yes it is possible! Read on to know how you can manage the other aspects that we mentioned.

Tools that make our lives easier

We have Trello and Asana for project management. These tools come in real handy when you have a team working on multiple projects. You can make separate channels to keep different projects and related conversations unaffected from other projects. And for communication, Slack saves the day for us. It also lets us separate our sincere work conversations from our casual chats via channels. For video collaboration we use Google meet and Zoom.

Choosing the right suite of tools reduces half of your work/collaboration effort. They might vary for you so do your research and choose wisely.

Meticulous planning and preparations

We start with a brainstorming session which sets the precedence for the sprint, wireframing and designing process. This chalks out a roadmap for reaching the solution. To make things easier for all the stakeholders involved, our project managers prepare a design brief that answers some basic questions at the outset. It includes:

Selecting the right participants
Informing everyone about the aim of the meeting and what roles will they play
The meeting’s specifics, including the time and date. Making a calendar event for this works out well for us.
Stationary and technical requirements, post-its, colored sharpies, quiet background, good internet connection that will allow all-day video conferencing, software to be used, as well as incorporating suggestions from the participants.

Once the brief is sent out, we do follow up calls with the participants. This will ensure that everyone onboard is on the same page to avoid any delays once the meeting starts.

Starting the design sprint

This elaborate planning is put to test here. We carry out two exercises

1. How might we?

This exercise helps us answer the fundamental questions of the application.

For example, your team is creating an app that helps to keep track of a user’s pet’s meals, vet appointments, exercise timings, etc. You can start by thinking about how you might attract the right set of audience, encourage them to use the app as well as address the different problems of pet owners.

All these “how might we” questions will help you come up with an outline of your product or service. Each team member can come up with a few specific questions that will show possible directions for designing and prototyping the project.

2. Crazy Eights

Crazy Eights has helped us come up with some of our most creative ideas. Everyone on the team needs to come up with 8 different ideas. This gives us a lot to choose from and mix-up the ideas to come up with the best designs.

Creating a prototype and testing it with users

In this stage, we work on combining the ideas to reflect well into an interactive prototype. We build wireframes using Axure and Invision helps us add interaction to our presentation. This is then followed by high fidelity prototypes using Sketch or Figma.

Once the prototypes are built, we bring in unbiased users to put out ideas to test. We leverage UserTesting.com to conduct the testing process with our users.

Conducting remote testing

You should be able to see how is your user interacting with your prototype
You can communicate with them continuously for smooth interaction
Remote testing should not affect the overall process and thus give the most accurate results.

We test run our setups for avoiding any hiccups once the users are onboard. This saves our time and ensures a smooth testing routine. A Google sheet is created by our team, which pools together all the answers in one place for the questions asked.

This sheet has answers related to the overall app idea, problem areas, and specifics related to the app design. All these answers are shared with the interviewer who evaluates the answers with what she/he observed during the testing. If possible, we do live recording of the users when they are interacting with our prototype, with their permission. This live recording helps us eliminate any biases that could be done subconsciously from the user or the interviewer’s end.

Final takeaways

After successfully running remote design sprints for the past few months, we have come up with a list of prerequisites for running this process smoothly.

Live video conferencing is a must at all stages accompanied by a good webcam and microphone. A reliable internet connection helps avoid any lags or connection drops.
Setting up meetings considering all the time zones differences. We use World Time Buddy to schedule our meetings. In case you are spread all across the globe, you can keep rotating the meetings to make it easier for everyone involved. You can also record your meetings for the participants who were unable to attend.
A quiet work environment during this sprint. This helps in minimizing any background sounds and distractions, thus keeping everyone focused on the tasks at hand. With all of us working from home, this can be a bit difficult, but you should encourage your team to keep this in mind.
Have one on one conversations before and after the sprint to see how efficient this process was for everyone involved. Any troubles faced by your teammates will surface on these calls. This feedback loop is aimed at improving this process.
Your tool selection should take into consideration all the stakeholders involved, and how comfortable they are with the tools.

To Conclude

Planning and executing remote design sprints is a daunting task. We have been collaborating remotely before this pandemic confined all of us into our home. Over time, we have improved our process with constant evaluation and tool selections.

We would love to collaborate with you virtually and integrate our learning within your projects as well. You can get in touch with us here.

UX Writing: The Art of Designing Conversations

Posted on June 6, 2020October 10, 2024 by galaxy-admin

A staggering 88% of online consumers are less likely to return to a site after a bad experience, and often, it’s the words that make or break this experience. Bill Gates once remarked, “Content is king,” and in the world of UX, this rings truer than ever. UX Writing isn’t just about filling in the blanks; it’s about creating a narrative that guides, engages, and resonates with the user. This article explores the multifaceted role of UX Writing in shaping digital experiences, offering insights that blend strategy with creativity.

The Essence of UX Writing

UX writing is a vital aspect of user experience, guiding interactions between humans and digital platforms. It involves crafting conversations, from button labels to error messages, and its effectiveness relies on clarity, conciseness, and contextual relevance. UX writing is the unsung hero of user experience, leading users through a digital landscape without their awareness.

Conversation Design and User Interface Copywriting

At the heart of UX Writing lies Conversation Design, a discipline that shapes the dialog between user and interface. It’s about anticipating user needs and responses, ensuring that every interaction feels intuitive and human-centric. Similarly, User Interface Copywriting focuses on the language used in these interactions, blending clarity with personality to create a seamless experience.

Content Strategy for UX

A robust Content Strategy for UX underpins effective UX Writing. This strategy involves understanding the audience, their journey, and the desired outcomes of their interaction with the interface. It’s about creating content that not only informs but also engages and delights users, thereby enhancing the overall user experience.

Implementing UX Best Practices

A key aspect of UX Writing is aligning with best practices. This includes clear and concise language, maintaining a consistent voice and tone, and ensuring accessibility. For example, Dropbox’s use of friendly, approachable language in its interface helps demystify cloud storage, making it more accessible to non-tech savvy users.

Applying Actionable Insights

Actionable insights are at the core of effective UX Writing. This means not only understanding the user’s journey but also anticipating their needs and responses. Jst like when Spotify users search for a song that’s not available, the app doesn’t just display an error message; it suggests similar tracks. This proactive approach turns a potential frustration into an opportunity for discovery.

Microcopy in UX

Microcopy, a small text snippet, can clarify functions, address user concerns, and inject personality into the interface. It’s a blend of utility and creativity, providing essential information in a tone that resonates with the user. Airbnb’s search functionality uses a conversational touch to personalize the experience and set a relaxed tone, exemplifying UX Writing at its finest.

Digital Communication Design

Digital Communication Design in UX Writing involves the arrangement and presentation of text, incorporating factors like typography, color, spacing, and hierarchy to enhance readability and user comprehension.

Good ways also involves presentation, as the layout on a screen significantly impacts information processing. Google’s simple search page is an example of this, designed for ease of navigation for all demographics.

User Experience Best Practices

Adhering to User Experience Best Practices involves creating content that is accessible, inclusive, and empathetic. It’s about understanding the diverse needs of users and ensuring that the interface is usable and understandable by all.

Voice and Tone in UX

The voice and tone used in UX Writing should align with the brand’s personality and the context of the user interaction. This consistency in voice fosters trust and reliability, while the appropriate tone can enhance user engagement and satisfaction.

Accessibility in UX Writing

Accessibility is crucial for ensuring content is perceivable, operable, understandable, and robust for all users, including those with disabilities. This approach not only meets legal requirements but also expands the reach and inclusivity of digital products. Microsoft’s inclusive design principles demonstrate this, catering to a wide range of abilities and reaching a broader audience.

Human-Computer Interaction (HCI)

Understanding HCI principles is crucial in UX Writing. It involves recognizing how users interact with computers and designing text that facilitates these interactions in the most efficient and satisfying manner.

Real-World Digging

A study by NN/g found that clear microcopy can boost task completion rates by 22%, while user-friendly language in error messages reduces frustration and increases satisfaction. Effective UX Writing can boost a website’s conversion rate by 17%.

Conclusion: Crafting Digital Excellence with Galaxy Weblinks

UX Writing is an art that requires a deep understanding of user psychology, a flair for language, and a commitment to creating intuitive and engaging digital experiences. It is important in crafting digital experiences that are not only functional but also emotionally resonant. It’s about creating a conversation that feels personal, informative, and inclusive.

At Galaxy Weblinks, we understand the power of words in the digital space. Our approach to UX Writing goes beyond mere aesthetics; we focus on creating content that drives engagement and fulfills user needs, ultimately contributing to a seamless user journey. Our expertise in UX design, digital marketing, and web development is not just about building platforms; it’s about crafting experiences that resonate, reflect, and respond. Let Galaxy Weblinks guide you through the nuanced landscape of UX Writing, where every word is a deliberate step towards enriching user experiences.