uxuifromzerotowow - Tumblr blog

uxuifromzerotowow · 3 years

Text

Plan your portfolio website

(с) Google UX Certificate

As you enter your new career as a UX designer, it’s helpful to begin working on your professional portfolio from the start. Think of your portfolio as a place to show off your ability to create a great user experience! Actively working on your portfolio each time you learn something new or create a new design will help you be best prepared when you’re ready to start the job search later. When you’re ready, you'll share your portfolio with recruiters to communicate your value and thinking process as a UX designer.

Now that you’ve selected a website builder to help create your portfolio website, you can start to plan the information that will be included throughout your site. Taking the time to plan beforehand will help you more easily make design decisions later! The layout of your portfolio website should highlight the most important parts of your work that you want to showcase. The website builder you use will most likely have layout templates you can work from. As you choose a template, aim for a clean design that makes it easy to find and move through content, especially your work samples.

To help you get started, check out this list of elements to include in your portfolio website. You might have noticed these tips in action when you reviewed examples of entry-level UX designer portfolios earlier in the course!

Name and personal logo (if you have one). Clearly list your name at the top of your portfolio website to help visitors easily identify whose work they are reviewing. If you have a personal logo, like a simple icon or a stylized version of your initials, you should consider including that alongside your name, too.

Navigation menu. Navigation is how users move from page to page on a website. Keep the navigation on your portfolio website simple and easy to follow. For example, users should be able to reach the homepage of your portfolio website from any part of your site, and your navigation titles should be clear and accurate.

Work samples. The focus of your portfolio website is to highlight samples of your UX design work. For example, you will create three projects during this certificate program that you can showcase on your portfolio website. When planning your portfolio website, be sure to choose a layout that will let work samples shine!

“About Me”. Plan to create a page on your portfolio website where visitors learn more about your interests, experiences, and passions. You'll create an "About Me" page for your portfolio website in an upcoming activity of the course.

Contact information. On your portfolio website, it's helpful to provide information about how people can contact you. For example, you should provide your email address, a link to your resume, and links to your professional online profiles (like LinkedIn), so visitors can contact you about potential job opportunities. Wherever possible, try to use professional-looking naming, like an email address of [YourName]@gmail.com. You can plan to include your contact information in a number of different parts of your portfolio website, like a dedicated page or across the top, bottom, or side of your portfolio website.

Color scheme. The colors in your portfolio can provide a more engaging user experience, and should reflect your personality and personal brand. We suggest selecting a small set of colors that work well together. Try selecting one primary color and one accent color that work well together. The goal of the colors is to support your content and personal brand, not distract from it.

You don’t need to have the content for each of these elements filled in yet. In fact, we’ll be helping you do just that through activities in this certificate program. For now, your goal is simply to have a clear understanding of the type of information that will be included in your portfolio website and start planning where you want to house each element.

Optional - Map your website’s content

A quick sketch of what your portfolio website could look like can give you a better idea of the right template to use from a website builder. All you need is a pen or pencil and paper to sketch out a basic layout of important pages.

For example, you could start by outlining the homepage of your portfolio website, and drawing where you think your name and logo, the navigation menu, and your work samples should go. Or, you could sketch an "About Me" page to visualize where you want to place an image of yourself, a description of your interests and experience, and contact information.

Don’t worry about trying to get fancy! Your goal is simply to start imagining what the layout of your website will be, so that you can utilize templates from website builders to their full potential. Use your creative skills and have some fun!

As you map the content of your portfolio website, consider answers to these questions:

What will you include on your portfolio homepage?

What elements, if any, do you want to include together?

How many pages overall will you need, and what should you title each page?

Collect portfolio elements

You haven’t started your first design project yet, but when you do, you'll need to showcase all of the work you do for the project in your portfolio. As you start working on design projects, document everything that could be a potential portfolio artifact. This includes taking photos of your notes, sticky notes, wireframes, prototypes, and even you and your teammates working together. The photos in your portfolio should always be high quality, which means the images should be clear, crisp, and easy to read. Believe it or not, those scraps of paper and work doodles are an important part of your thought process! And it’s nice to present your work in action with photos.

Here are a few pro tips for documenting your process, which are helpful to know before you begin your first design project:

Scan anything on paper with a printer or scanner. For example, scan your written notes and paper sketches. You should avoid taking photos of paper since the quality of the photos is usually pretty low. (Note: this does not apply to clusters of sticky notes, which are easier to photograph than scan.) You can use an actual scanner or a scanner app on your phone, which allows you to take a picture of a document and turn it into a digital scan.

Screenshot wireframes and prototypes. When you create designs using digital tools, like Figma and Adobe XD, capture that work. Your computer should have built-in tools to capture screenshots, but you can also use external programs like Snagit or Skitch.

Get permission. If you’re working on a design project for a client company, ask for their permission to showcase the project in your portfolio as early as possible. Some companies may have restrictions on what you can share publicly and have nondisclosure agreements in place for their projects, so be careful and thoughtful!

0 notes

uxuifromzerotowow · 3 years

Text

Design sprint

https://www.mural.co/templates/design-sprint

0 notes

uxuifromzerotowow · 3 years

Text

Guiding principles for the user-centered design process

Design for users and their needs. It can be tempting to design something in a certain way because it looks cool or solves one of your own problems, but it’s essential to keep in mind that you are not the end user. You're designing to help a diverse set of humans with specific needs.

Make your copy conversational. The writing within your product design should have a friendly, simple, and easily accessible tone. Avoid jargon or overly-complicated terminology that users might not understand.

Present all information clearly. Users should be able to navigate your product design easily and without assistance from others. Make key information, like checkout buttons, simple to find and identify.

Acknowledge user actions. Your product should let users know when they’ve executed a task correctly. That might be as simple as having a new window pop up when an icon is pressed, or as complex as animated tossed confetti to demonstrate that the user has accomplished a task.

Offer support. As UX designers, our goal is to make designs accessible and understandable to every user, but sometimes we fall a bit short. Offer users a safety net, like a support center or list of Frequently Asked Questions. Make sure a frustrated user doesn’t have to swipe and click all over the product to find help.

0 notes

uxuifromzerotowow · 3 years

Text

https://vimeo.com/85040589

vimeo

#Vimeo

0 notes

uxuifromzerotowow · 3 years

Text

The product development life cycle

Source: course Foundations of User Experience (UX) Design from Google

Every new product, whether it’s an app or a physical object, follows a specific set of steps that take it from the first spark of an idea to the release of the final product. This is called the product development life cycle, and it has five stages: brainstorm, define, design, test, and launch. Depending on where you work, the exact names of each stage might be a little different, but the overall process is generally the same.

In this reading, you’ll explore the product development life cycle and how UX design fits into each stage. As you might have guessed, UX designers are most engaged during the design stage of the product development life cycle, but they work closely with team members — like researchers, product managers, and engineers — throughout the entire life cycle.

As a product moves through the development life cycle, the team might need to spend longer working in one stage than in others, or repeat certain stages based on feedback. The success of each stage depends on the previous stage’s completion, so it’s important to do them in order.

Check out each of the five stages of the product development life cycle!

BRAINSTORM

The first stage of the product development life cycle is the brainstorm stage, when the team starts thinking of an idea for a product. Your team might already know the user problem that you want to solve when you begin the product development life cycle. If not, coming up with a list of user problems is a great place to start.

It’s important to pay attention to the diversity of your team at this stage. Teams that have meaningful diversity across identifiers like race, gender, abilities, family structure, age, and ethnicity are generally more effective at brainstorming because they bring together a lot of different lived experiences.

Consider this example: If you’re designing a new app to help working parents, your team might start the brainstorming stage by listing common problems that working parents face, like a lack of reliable childcare, transportation concerns, or trouble managing schedules. Your team might review user feedback about other similar products or the results of user surveys to help guide your ideas. After you’ve brainstormed lots of user problems, your team chooses one and starts coming up with ideas for solutions to that problem.

The brainstorm stage is also an ideal time to check out your product's competitors and identify if there are already similar products available in the market. You want your product to fill a gap in the market or solve a problem better than existing products.

One more thing to keep in mind: A UX designer at a large company might not be very involved in the brainstorm stage. But a UX designer at a startup or small business could have a big role to play!

DEFINE

The second stage of the product development life cycle brings together UX designers, UX researchers, program managers, and product leads to define the product. The goal is to figure out the specifications for the product by answering questions like: Who is the product for? What will the product do? And, what features need to be included for the product to be successful?

During the define stage, your team narrows the focus of your idea. One product can’t solve every user problem. Continuing with the example for an app to help working parents, your idea should focus on helping parents find reliable childcare or manage their schedules, not both. In this stage, a UX designer might help the team pin down the focus of the idea, but a product lead will probably be the one to define the scope of the project.

Research is key during the define stage, too. You need to pinpoint your potential users’ problems, and your team can’t assume they know what problems users are experiencing without asking the users directly. User research helps determine what problems need to be addressed by the product’s design.

DESIGN

The third stage of the product development life cycle is design. This is when you, as a UX designer, really get to shine! At this stage, UX designers develop the ideas for the product. Generally, UX designers start by drawing wireframes, which are outlines or sketches of the product, then move on to creating prototypes, which are early models of a product that convey its functionality.

UX writers are also involved in the design stage and might do things like write button labels or other copy within the product's wireframes and prototypes.

At this point in the life cycle, UX designers make sure to include all of the product specifications that were outlined in the define stage. You might also check to ensure that each part of the design fits together in an intuitive way. For example, UX designers might check that the screens of an app flow in a way that makes sense to the user. Or that each interaction, like tapping a button, has a correlating action, like an item getting added to a cart. On the other hand, with a physical product, UX designers might check that one piece of a physical object matches up to the connecting piece. Finally, UX designers also make sure that each task a user needs to complete is clear and easy to understand, like navigating from the homepage to the checkout confirmation page in an app.

TEST

Next, your designs move into the test stage. UX designers work with engineers to develop functional prototypes that match the original designs, including details and features that fit the company’s brand, like font and color choices. This also means writing the code and finalizing the overall structure of the product.

Or, if you want to test your designs earlier, another option is to test a functioning prototype of the product, using a design tool like Figma or Adobe XD. You'll learn how to create prototypes of your designs later in the certificate program.

At this stage, the designs go through at least three phases of testing: internal tests within your company, reviews with stakeholders, and external tests with potential users. Running these tests is typically the responsibility of the UX researcher on your team, if you have one.

First, the team tests the product internally to look for technical glitches and usability problems. This is often referred to as alpha testing.

Then, the product undergoes a test with stakeholders to make sure the product is aligned with the company’s vision, meets legal guidelines for accessibility, and follows government regulations for privacy, for example.

Finally, there’s an external test with potential users. This is the time to figure out whether the product provides a good user experience, meaning it’s usable, equitable, enjoyable, and useful. This is often referred to as beta testing.

Gathering and implementing feedback at this stage is absolutely critical. If users are frustrated or confused by your product, UX designers make adjustments or even create new versions of the design. Then, the designs are tested again, until there’s little or no friction between the product and the user.

It’s important to call out that the product development life cycle isn’t a completely linear process. Your team might cycle between designing and testing a few times before you're ready to launch the product!

LOUNCH

Finally, you’ve arrived at the fifth and final stage of the product development cycle: the launch stage, when the product is released into the world! This might involve listing an app in the Google Play Store or Apple’s App Store, making a website go live, or putting a physical product on store shelves.

The launch stage is a time to celebrate your work and start promoting the product. Marketing professionals on your team might post about the new product on social media or publish a press release. The customer support team might get ready to help new users learn how the product works.

Program managers also meet with the cross-functional team to reflect on the entire product development life cycle and ask questions like: What worked and what could be improved? Were goals achieved? Were timelines met? Making time for this reflection is super important, since it can help improve the process going forward.

For a physical product, the launch stage might be the end of the product development life cycle. But for a digital product, like an app or website, launching the product to a wider audience provides another opportunity to improve on the user experience. New users might find problems with the product’s functionality or features to improve that no one noticed before. So, after the launch stage, teams will often cycle back to the design and testing stages to start working on the next version of a digital product.

0 notes

uxuifromzerotowow · 3 years

Text

To inspire

https://www.interaction-design.org/literature

https://uxdesign.cc/

https://xd.adobe.com/ideas/

0 notes

uxuifromzerotowow · 4 years

Text

Whiteboard challenge

https://uxdesign.cc/designchallenge-cd7bdb589855

#recruiting #interviews

0 notes

uxuifromzerotowow · 4 years

Link

#sticky

0 notes

uxuifromzerotowow · 4 years

Link

0 notes

uxuifromzerotowow · 4 years

Link

#sticky

0 notes

uxuifromzerotowow · 4 years

Link

0 notes

uxuifromzerotowow · 4 years

Text

The 4 Golden Rules of UI Design by Nick Babich

The user interface (UI) is a critical part of any software product. When it’s done well, users don’t even notice it. When it’s done poorly, users can’t get past it to efficiently use a product. To increase the chances of success when creating user interfaces, most designers follow interface design principles. Interface design principles represent high-level concepts that are used to guide software design. In this article, I’ll share a few fundamental principles. These are based on Jakob Nielsen’s 10 Usability Heuristics for UI Design, Ben Shneiderman’s The Eight Golden Rules of Interface Design, and Bruce Tognazzini’s Principles of Interaction Design. Most of the principles are applicable to any interactive systems — traditional GUI environments (such as desktop and mobile apps, websites) and non-GUI interfaces (such as voice-based interaction systems).

The UI design principals are:

Place users in control of the interface

Make it comfortable to interact with a product

Reduce cognitive load

Make user interfaces consistent

1. Place users in control of the interface

Good UI s instill a sense of control in their users. Keeping users in control makes them comfortable; they will learn quickly and gain a fast sense of mastery.Make actions reversible – be forgivingThis rule means that the user should always be able to quickly backtrack whatever they are doing. This allows users to explore the product without the constant fear of failure — when a user knows that errors can be easily undone, this encourages exploration of unfamiliar options. On the contrary, if a user has to be extremely careful with every action they take, it leads to a slower exploration and nerve-racking experience that no one wants.Perhaps the most common GUIs where users have the ‘Undo/Redo’ option are text and graphics editors. While writing text or creating graphics, ‘Undo’ lets users make changes and go back step-by-step through changes that were made. ‘Redo’ lets users undo the undo, which means that once they go back a few steps, they are able to move forward through their changes again.‘Undo’ can be extremely helpful when users choose system function by mistake. In this case, the undo function serves as an ’emergency exit,’ allowing users to leave the unwanted state. One good example of such emergency exits is Gmail’s notification message with an undo option when users accidentally delete an email.

Create an easy-to-navigate interface

Navigation should always be clear and self-evident. Users should be able to enjoy exploring the interface of any software product. Even complex B2B products full of features shouldn’t intimidate users so that they are afraid to press a button. Good UI puts users in their comfort zone by providing some context of where they are, where they’ve been, and where they can go next:

Provide visual cues. Visual cues serve as reminders for users. Allow users to navigate easily through the interface by providing points of reference as they move through a product interface. Page titles, highlights for currently selected navigation options, and other visual aids give users an immediate view of where they are in the interface. A user should never be wondering, “Where am I?” or “How did I get to this screen?”

Predictability. Users should be provided with cues that help them predict the result of an action. A user should never be wondering, “What do I need to press in order to do my task?” or “What is this button for?”

Provide informative feedback – be acknowledging

Feedback is typically associated with points of action — for every user action, the system should show a meaningful, clear reaction. A system with feedback for every action helps users achieve their goals without friction.

UI design should consider the nature of interaction. For frequent actions, the response can be modest. For example, when users interact with an interactive object (such as a button), it’s essential to provide some indication that an action has been acknowledged. This might be something as simple as a button changing color when pressed (the change notifies the user of the interaction). The lack of such feedback forces users to double-check to see if their intended actions have been performed.

Show the visibility of system status

Users are much more forgiving when they have information about what is going on and are given periodic feedback about the status of the process. Visibility of system status is essential when users initiate an action that takes some time for a computer to complete. Users don’t like to be left seeing nothing on the device screen while the app is supposed to be doing something. The use of progress indicators is one of the subtle aspects of UI design that has a tremendous impact on the comfort and enjoyment of users.

Accommodate users with different skill levels

Users of different skill levels should be able to interact with a product at different levels. Don’t sacrifice expert users for an easy-to-use interface for novice or casual users. Instead, try to design for the needs of a diverse set of users, so it doesn’t matter if your user is an expert or a newbie.

Adding features like tutorials and explanations is extremely helpful for novice users (just make sure that experienced users are able to skip this part).

Once users are familiar with a product, they will look for shortcuts to speed up commonly-used actions. You should provide fast paths for experienced users by enabling them to use shortcuts.

2. Make it comfortable for a user to interact with a product

Eliminate all elements that are not helping your users

Interfaces shouldn’t contain information that is irrelevant or rarely needed. Irrelevant information introduces noise in UI —it competes with the relevant information and diminishes its relative visibility. Simplify interfaces by removing unnecessary elements or content that does not directly support user tasks. Strive to design UI in a way that all information presented on the screen will be valuable and relevant. Examine every element and evaluate it based on the value it delivers to users.

A good example of an app that follows the ‘less is more’ approach by avoiding overloading the interface with content or features is iA Writer.

The interface of iA Writer app is a clean typing sheet with no distractions. It allows users to focus on what they’re writing and hides everything else.

Don’t ask users for data they’ve already entered

Don’t force users to have to repeat data they’ve previously entered. Users are easily annoyed by tedious data-entry sequences, especially when they have provided all the required information before. Good UI performs a maximum of work while requiring a minimum amount of information from users.

Avoid jargon and system-oriented terms

When designing a product, it’s important to use language that is easy to read and understand. The system should speak the user’s language, with words, phrases, and concepts familiar to the user, rather than jargon or system-oriented terms.

Apply Fitts’s Law to interactive elements

Fitts Law states that the time to acquire a target is a function of the distance to and size of the target. This means that it’s better to design large targets for important functions (big buttons are easier to interact with).

It’s also important to remember that the time required to acquire multiple targets is the sum of the time to acquire each. Thus, when working on UI design, to increase the efficiency of an interaction, try to not only reduce distances and increase target sizes, but also reduce the total number of targets that users must interact with to complete a given task.

Design accessible interfaces

When we design products it’s important to remember that a well-designed product is accessible to users of all abilities, including those with low vision, blindness, hearing impairments, cognitive impairments, or motor impairments. Good UI is accessible UI because improving your product’s accessibility enhances the usability for all groups of users.

Color is one of the elements of an interface that has a strong impact on accessibility. People perceive color differently — some users can see a full range of colors, but many people can only make out a limited range of colors. Approximately 10 percent of men and one percent of women have some form of color blindness. When designing interfaces, it’s better to avoid using color as the only way to convey information. Anytime you want color to convey information in the interface, you should use other cues to convey the information to those who cannot see the colors.

Use real-world metaphors

Using metaphors in UI design allows users to create a connection between the real world and digital experiences. Real-world metaphors empower users by allowing them to transfer existing knowledge about how things should look and work. Metaphors are often used to make the unfamiliar familiar. Take the recycle bin on your desktop, which holds deleted files, as an example – it’s not a real trash bin, but it’s visually represented in a way that helps you understand the concept more easily.

Engineer for errors

Errors are inadvertent in the user journey. Bad error handling paired with useless error messages can fill users with frustration and lead them to abandon your app. A well-crafted error message, on the other hand, can turn a moment of frustration into a moment of conversion. An effective error message is a combination of explicit error notification together with hints for solving the problem.

Even better than writing good error messages is having UI design that prevents a problem from occurring in the first place. Try to either eliminate error-prone conditions or check for them and present users with a confirmation dialog before they commit to the action. For example, Gmail prompts you when you forget to insert an attachment.

Protect a user’s work

Ensure that users never lose their work. Users should not lose their work as a result of an error on their side (i.e. accidentally refresh a web page with a form that has user input), a system error, problems with an internet connection, or any other reason other than those that are completely unavoidable, like an unexpected power loss.

3. Reduce cognitive load

Cognitive load is the amount of mental processing power required to use a product. It’s better to avoid making users think/work too hard to use your product.

Chunking for sequences of information or actions

In 1956, psychologist George Miller introduced the world to the theory of chunking. In his works, Miller says the human working memory can handle seven-plus-or-minus two “chunks” of information while we’re processing information.

This rule can be used when organizing and grouping items together. For example, if your UI forces users to enter telephone numbers without normal spacing it can result in a lot of incorrectly-captured phone numbers. People cannot typically scan clusters of ten or more digits to discover errors. That’s exactly why phone numbers are broken up into smaller pieces.

Reduce the number of actions required to complete a task

When designing a user interface, strive to reduce the total number of actions required from a user to achieve the goal. It’s worth remembering the three-click rule, which suggests the user of a product should be able to find any information with no more than three mouse clicks.

Recognition over recall

One of the Jakob Nielsen’s 10 usability heuristics advises promoting recognition over recall in UI design. Recognizing something is much easier than recalling it because recognition involves more cues in our brain (cues spread activation to related information in memory, and those cues help us remember information).

Designers can promote recognition in user interfaces by making information and functionality visible and easily accessible. Visual aids, such as tooltips and context-sensitive details, also help support users in recognizing information.

Promote visual clarity

Good visual organization improves usability and legibility, allowing users to quickly find the information they are looking for and use the interface more efficiently.

When designing layouts:

Avoid presenting too much information at one time on the screen. This results in visual clutter.

Remember the principle ‘form follows function.’ Make things look like they work.

Apply the general principles of content organization such as grouping similar items together, numbering items, and using headings and prompt text.

4. Make user interfaces consistent

Consistency is an essential property of good UI—consistent design is intuitive design. Consistency is one of the strongest contributors to usability and learnability. The main idea of consistency is the idea of transferable knowledge — let users transfer their knowledge and skills from one part of an app’s UI to another, and from one app to another app.

Visual consistency (style)

Users should never question the integrity of a product. The same colors, fonts, and icons should be present throughout the product. Don’t change visual styles within your product for no apparent reason. For example, a Submit button on one page of your site should look the same on any other page.

Avoid using different styles for elements on different pages of the site. Users should not have to wonder whether a transformed button like this example means the same thing.

Functional consistency (behavior)

Consistency of behavior means the object should work in the same way throughout the interface. The behavior of interface controls, such as buttons and menu items, should not change within a product. Users don’t want surprises or changes in familiar behavior — they become easily frustrated when things don’t work. This can inhibit learning and stop users from feeling confident about consistency in the interface. Do not confuse your user — keep actions consistent by following “The principle of least surprise,” to have the interface behave the way users expect it to.

Consistent with user expectations

People have certain expectations about the apps/websites they use. Designing your product in a way that contradicts a user’s expectations is one of the worst things you can do to a user. It doesn’t matter what logical argument you provide for how something should work or look. If users expect it to work/look a different way, you will face a hard time changing those expectations. If your approach offers no clear advantage, go with what your users expect.

Follow platform conventions. Your product should be consistent with standards dictated by platform guidelines. Guidelines ensure that your users can understand individual interface elements in your design.

Don’t reinvent patterns. For most design problems, proper solutions already exist. These solutions are called patterns. Popular patterns become conventions and the majority of users are familiar with them. Not taking this solution into account and continuing to design your own solution can lead to challenges for users. In most cases, breaking design conventions results in a frustrating user experience — you’ll face usability problems not necessarily because your solution will be wrong, but because users won’t be familiar with it.

Don’t try to reinvent terminology. Avoid using new terms when there are words available that users already know. Users spend most of their time in other apps and on other sites, so they have certain expectations about naming. Using different words might confuse them.

Conclusion

The goal for UI designers today is to produce user-friendly interfaces: interfaces that encourage exploration without fear of negative consequences. Without any doubt interfaces of the future will be more intuitive, enticing, predictable, and forgiving, but most principles of UI design listed in this article will surely be applicable to them, too.

Source https://xd.adobe.com/ideas/process/ui-design/4-golden-rules-ui-design/

#ux #ui #uidesign #ui development #uxdesigner

1 note · View note