InRhythm

Your partners in accelerated digital transformation

Designers

5 Soft Skills That Every UX Designer Should Have

Overview

No alt text provided for this image

Creating a digital product is full of rewards and challenges. No two projects are ever the same, meaning that each individual one must be approached from all angles. There are certain skills that are crucial if one wants to be a successful designer. Skills like wireframing and prototyping are key, but soft skills are just as essential to good design.

The following soft skills are a necessary part of every UX Designer’s toolkit.

1. Empathy

No alt text provided for this image

How can you build a product that accomplishes a users’ goals if you don’t understand their needs and desires? In order to be a successful UX Designer, it is paramount that you put yourself in the users’ shoes so you can truly design with their needs in mind.

You have to be able to design and solve for various types of users. Learning to empathize with them is a skill that will develop over time, but you have to feel what your users feel in order to shed light on what will be most beneficial for them.

One of the best ways to begin implementing this into your everyday practice is to speak directly to your users, whether it’s through surveys, user interviews, or usability tests.

No alt text provided for this image

For example, the core of a usability test is not about understanding your product, but about understanding how your users use your product. What is the path they take to get from A to B? What frustrates them the most? What makes them happy?

Another great technique for getting to know your users is observation. Immerse yourself in their environment. It is your responsibility as a UX Designer to be empathetic toward all users of the product and make certain that their goals and needs are met.

2. Effective Collaboration

No alt text provided for this image

You have probably found yourself in a situation where you were wearing a variety of different hats as a designer. You also most likely realized that relying on yourself to perform all these jobs was quite challenging or nearly impossible. This is because an individual cannot build a successful product on their own. It’s a team effort, encompassing roles from UX Designers to Product Managers to Developers to Marketing and so on.

As a UX Designer, you will have to collaborate with other teams on a daily basis. You will partner with developers to understand constraints, or connect with the marketing team to ensure you are consistent in how you communicate the value of the product to your users.

No alt text provided for this image

Integrating with other teams means you sometimes have to rely on others to guarantee that everything goes smoothly. This is why collaboration is a skill you must possess in order to be an effective team member. If you know how to best utilize each team’s specialized skill and vice versa, you will create a mutual respect for each other. This will allow you to create an environment for the product to flourish and reach its full potential.

3. Adaptive Work Ethics

No alt text provided for this image

The world is constantly shifting, which means that the most popular trends today are waiting to be replaced by tomorrow’s fads. There is a good chance that what excites a user now will bore them next week. As a UX Designer, how can you combat this unpredictability? First, it is your duty to plan and be aware of the malleability of trends in technology. It is critical to stay informed and up-to-date with the latest craze, while also not losing sight of what is truly important.

In order to keep yourself from drowning in a sea of uncertainty, ensure you are listening to UX/technology podcasts, reading recent articles, or planning lunch-and-learns with your team. Remember to not become too wrapped up in the “now” because that is likely to change. Instead, stay informed and keep that information in your pocket so that you are prepared for any situation.

No alt text provided for this image

Each project brings new challenges that you may not be able to plan for. It’s important to not become frustrated or overwhelmed if some aspect does not go exactly as planned. If you craft a solution for a product and it does implement as intended, then have backup solutions. There is more than one answer to the problem, and planning for the unexpected will help you adapt more quickly. While it is nearly impossible to know every single problem that could emerge, you can be aware of these potential issues and plan out how you will solve them. You should be equipped with the necessary skills and mindset that will allow you the flexibility to make changes during any stage of the process.

4. Passion

No alt text provided for this image

While being passionate is applicable in any field, it is especially relevant to UX; as a UX Designer, a lack of interest will seep through into the product. If you don’t have a passion for creating and solving problems, then you won’t be an effective UX Designer.

It takes a lot of patience to craft the right solution and you have to crave thinking outside the box and digging deep. You may need to come up with 100 different solutions before you have your “aha” moment. This probably means gathering more research, running tests, analyzing data, and creating wireframes. You have to possess that inner drive to create (and iterate and then iterate again). You can grow to love the field of UX, but this “soft skill” is more of an innate passion for design that you should already possess.

5. Open-Minded Approach

No alt text provided for this image

This may not be a skill that immediately jumps into your head when you think of UX Design. Yet, if all UX Designers were narrow-minded, then it would be impossible to ever accomplish anything. How can you create a great product if you are not open to new ideas and other points of view?

You need to listen to your team members—and your users—and know when and how to utilize their ideas. You also have to be open to trying solutions that are unprecedented. The same solution is not going to work for every problem, so learning how to be accepting of new methods will go a long way. Be comfortable with the unknown and receptive to other ideas.

Tolerance for other perspectives is what separates a beginner from an expert. Think critically, but withhold judgment. Be inventive, without boundaries.

Closing Thoughts

No alt text provided for this image

Soft skills are equally as important as technical skills, if not more vital. Being able to empathize with users or collaborate productively with your team is what will ultimately drive results and culminate a great product. As a UX Designer, you will be constantly faced with new challenges which force you to think outside the box.

Possessing these soft skills will help you clearly align your user’s goals with critical business objectives. Therefore, raising the bar on your overall successes as you continue to learn and grow as a UX Designer.

Photography For UX Designers: The Top 4 Tips To Make The Most Of Online Imagery

Overview

Photography is a crucial part of designing a layout or banner. When thinking about an image to place with text, whether it be overlaying on the image or underneath, above, or to the sides of an image, a designer needs to consider two key factors:

  • Does the image make sense?
  • Does the image have a conversation with the layout?

Elements such as the dynamic imagery of people interacting, strong lines, action, or diversity are all ways that design and imagery can speak to each other.

No alt text provided for this image

Using these elements helps create a story for the viewer to interact with and incite a more personal experience on a larger scale. To have a viewer relate to content is achieving the ultimate goal: Fostering an emotional experience is gold-medal status.

1. Ensure The Image Speaks To The Content

When developing the design of a page with photography in mind, the closer the image relates to the content, the more likely the viewer’s eye moves around the page in a pleasing manner.

Strategically placing images on either side of the screen will help the viewer have resting time between content, which creates a “visual storyline” for the page. The images also help the user stay engaged with the page.

No alt text provided for this image

2. Photograph Composition Builds Directional Sight Lines

Make sure that the main element of the image—such as the people or subject matter— is placed to the right or left. (The exception being the positioning of the direction of the content in an advertisement or banner) If it’s in a layout, making sure to have the image point in the direction of the content that viewer’s need to be directed to focus on first, is crucial.

No alt text provided for this image

3. Appropriate Image Content Enhances The Story

Make sure the subjects in the image are both dynamic as well as inclusive. All subjects should tell a story to help the user understand what the content will say, like the synopsis of a paragraph.

No alt text provided for this image

4. Complimentary Color Theory Provides Both An Aesthetic And User-Friendly Experience

Studies have shown that a dark background with the text knocked out makes for a more eye-grabbing advertisement.

For example, if the image is being used for an advertisement, it’s easier for users to read smaller text if it’s dark text on a light background.

It’s imperative to make sure the section where the text sits is not too busy. The user needs (and wants) to authentically experience content without strenuous distraction.

No alt text provided for this image

Closing Thoughts

Keeping all these elements in mind while looking for imagery to “illustrate” a layout or advertisement will help any user have a better user experience.

Top 5 Best Practices For Building Forms

Various forms like sign-ups, logins, or checkout pages are seen everywhere in applications and websites, but what attracts a user to fill one out? What exactly makes one click the sign-up or call-to-action button on the page? Forms exist to be filled out, but there are a surprising number of forms which—through poor design, excessive fields, or other factors—push users to abandon them, unfilled. Make your forms simple and easy to navigate, and watch the data come flowing in.

Here are a few best practices when putting together your own forms to keep engagement high:

1. Ask For Less Information (and have an easy login!)

If you have a page with a sign-up flow for a new mobile app, what do you want to know from your user? It depends on what the product is and why you need the information from them. As an example: a date or friend matching platform would want your age, gender, and zip code on one screen. The next page could be preferences about the person you are hoping to match with. All of this information is necessary for the app’s purpose, but connecting to Facebook or Google has also made it much easier to skip certain steps in this process, allowing for less info needing to be manually filled out.

The following demonstration shows just how easy it is for the user to access all of the fields needed—i.e. name, picture, friends—from the Facebook API instead of filling out the same information manually.

No alt text provided for this image

2. Single-Column Ease vs. Multi-Column Stress

When you’re making a form, make sure it’s displayed in a single-column instead of a multi-column. This design element will make it easier for users to scan through and complete instead of trying to tab through different fields and with the potential of resulting frustration.

The following demonstration illustrates, the relative ease for a user to scan through one column, answering questions in a linear format instead of doing a Z-pattern back and forth.

No alt text provided for this image

3. Automate, Automate, Automate

One of the best form practices for improving design is automation. Automation makes it easier for the user to go through fields, without worrying about switching from lower and upper cases. The only fields that should not be capitalized are emails and passwords, since those cause delivery issues.

4. Progress Tracker

A user who is filling out a form—unless it’s a simple sign-up—wants to know how long the process will take them, and maybe even if it should be filled out now or saved for later. For mobile and desktop alike, a progress tracker should be included, like the examples shown below.

No alt text provided for this image

If the user is on a certain step it’s important to note that as well, all within an easily understood display of what they’ve already completed.

5. Testing (even when you don’t want to)

This is the step that many don’t even think of taking, since the design could be flawed and more time could be wasted in redesigning. The form you just created should be tested on a few different devices (at the very least on mobile and desktop) to see if it actually works and makes sense. What’s the point of developing a product that doesn’t work for the user?

The ultimate goal is getting the user to click on the “continue” or “submit” buttons in the end. By following these best practices, you can remove common roadblocks in form submissions and make the experience better for your users. 

A Comprehensive Introduction To Apple’s Human Interface Guidelines

Overview

No alt text provided for this image

Human Interface Guidelines suggest how interface components should look and how users will interact with them. There are as many ideas about interface design as there are proponents of any particular library or API. 

All interface designs share a similar goal, which is to create a unified user experience across the environment. To accomplish that, the guidelines help make their design’s interface intuitive, consistent, and learnable, both for the OS for its applications and tools. All interface elements and their guidelines should be included in an interface design document with usage examples, when practical. For example, buttons, checkboxes, dialog boxes, application views, buttons, bars, etc.

In Hamid Mahmood’s Lightning Talk session, we will breaking down the following topics:

  • Overview
  • Human Interface Guidelines
  • Customer Impact
  • Live Demonstration
  • Closing Thoughts
  • Additional Resources

Human Interface Guidelines

No alt text provided for this image

Apple was one of the first companies to use “look and feel” in their literature when referencing the MacOS interface in the 1980s. As technology advanced, ideas on interface design also advanced.

Today, Apple has “Human Interface Guidelines” that establish how an application should look and feel to users on all of its platforms.

Apple’s HIG is an extensive document covering all aspects of application look and feel across the entire Apple ecosystem. There is a platform-specific HIG for each Apple OS environment: 

  • macOS for MacBooks
  • iOS for iPhone/iPad
  • watchOS for Apple Watches
  • tvOS for Apple TV

Apple’s HIG is organized by platform and technologies. Each platform is subdivided into sections. For iOS, for example, the sections cover architecture, user interaction, system capabilities, icons and images, bars, views, controls, and extensions.

From the iOS section topics, it’s evident that Apple is invested in ensuring that applications on their platform have that certain Apple “look” and that those applications function in a consistent manner. 

Consistency is an important factor in user uptake of new applications. When UI elements function similarly, it’s easier for users to transfer their operational knowledge between applications. 

Using the HIG helps maintain the quality of applications by guiding UI decisions to support the application’s operation. Following the HIG will improve engineering and design decisions by helping programmers anticipate what most users will expect from an application’s interface.

It’s important to remember that the HIG does not dictate how an application operates, it describes the user/application interaction through visual cues, controls, and application feedback.

Customer Impact

No alt text provided for this image

When followed, the Human Interface Guidelines ensure that the components of an application’s UI are understandable to the average Apple user through familiarity with the OS and with other applications.

Maintaining a consistent interface helps create an application interface that is more rapidly accepted and gives users an increased feeling of being in control, which creates a positive user experience. A side benefit is that an application will complete the App Store approval process in a more timely manner because the UI and its controls appear and operate in the manner expected by the reviewers.

Live Demonstrations

Hamid Mahmood has crafted an intuitive walkthrough demonstration of the advantages of application coding within Apple’s Human Interface Guidelines:

No alt text provided for this image

Be sure to follow Hamid’s entire Lightning Talk to follow along with these steps in real time.

Closing Thoughts

No alt text provided for this image

Apps in this era of phones, laptops, tablets are not restricted to one device. Nor are users.

Therefore, it becomes imperative to adhere to some consistent UI guidelines to ensure a seamless experience and broader adoption by users. The cut-throat competition between iOS and Android has been good for both, making them more polished, more feature-packed and technologically potent. The best design services know how crucial it is to keep these guidelines in mind when designing interfaces on iOS and Android.

Happy coding!

To learn more about the implementation of Apple’s Human Interface Guidelines and to experience Hamid Mahmood’s full Lightning Talk session, watch here. 

Additional Resources

The Top 5 UI/UX Design Programs For Developers

Overview

No alt text provided for this image

Let’s begin with the basics:

  • User Experience (UX) design is how a person feels about using a product, whether that be a website, mobile application, or anything human-computer related.
  • User Interface (UI) design, by comparison, is all about the look and feel of the design itself; in other words, the colors or icons a person sees on the page.

While it may seem relatively straightforward, there are a variety of free and paid tools for UX and UI, that are specialized and distinctive to this level of design work.

So, the question becomes which programs are the best? If you get an assignment from your boss and need to do a wireframe or mockup quickly, which program can a developer use if there isn’t one specified?

The staple Adobe Photoshop and Illustrator just don’t do the trick for creating fast designs, but thankfully there are a few easy, intuitive programs that can help get the job done:

1. Sketch

No alt text provided for this image

Sketch has been one of the most popular programs for UX/UI designers to use since its launch in 2010. Sketch is used to create different sized artboards for various browser sizes, apps, or even banners, allowing a designer to format their design to fit the multiple standard dimensions on the fly.

Sketch’s linking to the InVision application, allows one to create a prototype of their artboards. Sketch isn’t trying to compete with larger, more established programs like Photoshop, but instead is focused on trying to make UX and UI easier with features like converting drop shadows in CSS in order to save time for developers, making it easier to pinpoint exactly which code to use in the project’s final execution.

Price: $99 For Mac Users

2. InVision Studio

No alt text provided for this image

InVision first came out with an easy-to-use prototyping tool that syncs with Craft directly on Sketch. Over the years, they came out with their own design program—Studio.

Product Manager, Karla Smagorinsky from InVision, who works directly with Freehand, describes its best use case: “Studio is a new type of screen design tool that gives designers the power to quickly create high-fidelity prototypes with rich motion and micro-interactions that leave nothing open to interpretation. This means designers and digital product teams can have higher quality feedback sessions with both internal stakeholders and external users, allowing companies to move faster and release higher quality products.”

Studio differentiates itself from Sketch by rapid prototyping, and adaptable layouts; overall, InVision has an ecosystem of great tools like Freehand, Inspect, Design Manager System (DSM) and more!

Making it a great tool for designers needing to link up two items (like wireframes and prototyping) in the fastest way possible for a low cost.

Cost: Free for both Studio (only on Mac) and prototyping tools (web-based)

3. Adobe XD

No alt text provided for this image

Adobe had to put themselves back on the market in 2015 after the launch of Sketch.

Adobe XD has a number of features that position it as an evolving staple for UX/UI designers, including, but not limited to its repeat grid structure, so a user can select objects and then repeat those objects along an x- or y-axis.

Adobe has also created reusable symbols, so it’s easier to place objects in multiple artboards. The best part of having a product like Adobe XD is that it’s integrated into one platform primary platform (Adobe Creative Suite), therefore making it easier to receive feedback and allow follow-up iterations based on primary prototype designs.

Price: $9.99/month for the standalone product (works on Macs and Windows) or $49.99/month as part of the Adobe Creative Cloud Suite

4. Figma

No alt text provided for this image

Figma lets designers build dynamic prototypes and mockups, test them for usability, and sync up all of the progress.

Figma allows for a collaborative environment where multiple people can work on a project at the same time, much like Google Docs — letting designers see which exact team members have it open in order for real-time collaboration. Designers will see who’s working and what they’re doing.

It’s browser-based, making it accessible to everyone in an instant.

Price: Free for individual use, $75/month for team editing subscriptions

5. Axure

No alt text provided for this image

Axure functions in prototyping and keeping track of the workflow. It features a smooth interface to document as developers progress. High fidelity drives this app, resulting in prototypes full of details.

Axure offers many of the other features of popular prototyping and UI design tools. It allows for testing of functionality and puts everything together for an easy developer handoff. This, combined with an emphasis on communication, ensures that everyone on a project is kept up-to-date with progress and changes as they happen in real time, making Axure a solid choice for UI design.

Price: $25-$45/month based on specific team subscription needs

Closing Thoughts

No alt text provided for this image

The best UI design tools can help developers create realistic, functional prototypes quickly and easily. Each designer has their own favorite, and many use more than one tool since each option has its strengths and weaknesses. 

Whether a designer’s primary focus is on UX or UI, or they’re trying to marry the two together, having quality tools in their toolbox will both streamline and bring ease to the accomplishment of tasks.