One place for hosting & domains

      User

      How To Create User Interactions with Events in Vue


      The author selected Open Sourcing Mental Illness to receive a donation as part of the Write for DOnations program.

      Introduction

      In Vue.js development, a client’s web browser reads HTML and JavaScript and renders web pages based off of the instructions that the developer writes for it. But the web page or application not only needs to process data; it also needs to process user interactions. To do this, developers use events in JavaScript that execute code when the user interacts with HTML elements.

      An event can capture any user interaction with a user interface button or a physical keyboard or mouse. In JavaScript, you would create event listeners that wait for that event to occur and then execute a block of code. In Vue.js, you are not required to listen for an event; that is done automatically with the v-on: directive.

      In this tutorial, you will use events in Vue to create an application of airport codes. When the user selects an airport code, the app will add that airport to a “favorites” collection. By following along with this project, you will learn what events are, how to use Vue’s built-in events, and how to create your own custom events.

      Prerequisites

      To complete this tutorial, you will need:

      Step 1 — Setting Up the Project

      The first step in this tutorial will be to set up a demo project with some data to display in the view. This will include an array of JavaScript objects that contain airport data and a Vue component to iterate over and render the data.

      First, generate a project using Vue CLI:

      • vue create favorite-airports

      This will create a project named favorite-airports. This tutorial will use Vue 3, so when prompted, select the option Default (Vue 3) ([Vue 3] babel, eslint):

      Output

      Vue CLI v4.5.6 ? Please pick a preset: Default ([Vue 2] babel, eslint) ❯ Default (Vue 3) ([Vue 3] babel, eslint) Manually select features

      Once you have created the project, make a directory to hold all of your local data for this project. First, make the new project folder your working directory:

      Next, make a data directory in the src directory:

      In your text editor of choice, open a file called src/data/airports.js. Add the following data to the file:

      favorite-airports/src/data/airports.js

      export default [
        {
          name: 'Cincinnati/Northern Kentucky International Airport',
          abbreviation: 'CVG',
          city: 'Hebron',
          state: 'KY',
        },
        {
          name: 'Seattle-Tacoma International Airport',
          abbreviation: 'SEA',
          city: 'Seattle',
          state: 'WA',
        },
        {
          name: 'Minneapolis-Saint Paul International Airport',
          abbreviation: 'MSP',
          city: 'Bloomington',
          state: 'MN',
        },
        {
          name: 'Louis Armstrong New Orleans International Airport',
          abbreviation: 'MSY',
          city: 'New Orleans',
          state: 'LA',
        },
        {
          name: `Chicago O'hare International Airport`,
          abbreviation: 'ORD',
          city: 'Chicago',
          state: 'IL',
        },
        {
          name: `Miami International Airport`,
          abbreviation: 'MIA',
          city: 'Miami',
          state: 'FL',
        }
      ]
      

      This data is an array of objects consisting of a few airports in the United States. Next, you are going to iterate through this data to generate cards consisting of the name, abbreviation, city, and state properties. When the user clicks on a card, the app will emit an event up to the parent, which will add that airport to a collection of data that will represent your favorite airports.

      Save and close the airport.js file.

      To render the data, create a single-file component (SFC) with the name src/components/AirportCard.vue and open it in your text editor. This component will contain all of the styles and logic for the airport card.

      Add the following contents to the file:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      
      <script>
      export default {
        props: {
          airport: {
            type: Object,
            required: true
          }
        }
      }
      </script>
      
      <style scoped>
      .airport {
        border: 3px solid;
        border-radius: .5rem;
        padding: 1rem;
      }
      
      .airport p:first-child {
        font-weight: bold;
        font-size: 2.5rem;
        margin: 1rem 0;
      }
      
      .airport p:last-child {
        font-style: italic;
        font-size: .8rem;
      }
      </style>
      

      This component contains a prop, which in Vue.js is a way to pass data down from a parent component to a child component. The template section then renders this data. For more on single-file components, check out the How To Create Reusable Blocks of Code with Vue Single-File Components tutorial.

      You may notice that there is some CSS included in the code snippet. In the AirportCard.vue component, the wrapper <div> contains the class of airport. This CSS adds some styling to the generated HTML by adding borders to give each airport the appearance of a card. :first-child and :last-child are pseudo-selectors that apply different styling to the first and last p tags in the HTML inside of the div with the class of airport.

      Save the file and exit from your text editor.

      Next, modify the existing App.vue component to iterate through the airports.js data and render a series of AirportCards.vue components. Open src/App.vue in your text editor and replace the contents with the following highlighted code:

      favorite-airports/src/App.vue

      <template>
        <div class="wrapper">
          <div v-for="airport in airports" :key="airport.abbreviation">
            <airport-card :airport="airport" />
          </div>
        </div>
      </template>
      
      <script>
      import { ref } from 'vue'
      import allAirports from '@/data/airports.js'
      import AirportCard from '@/components/AirportCard.vue'
      
      export default {
        components: {
          AirportCard
        },
        setup() {
          const airports = ref(allAirports)
          return { airports }
        }
      }
      </script>
      
      <style>
      #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
      
      .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 1rem;
        max-width: 960px;
        margin: 0 auto;
      }
      </style>
      

      This imports the data and the SFC, then uses the v-for directive to iterate over the data, creating an airport card for each object in the airport.js array. It also adds additional CSS targeted to the wrapper class, which uses CSS grid to manage the layout of the cards.

      Save and exit the file. With the project now set up, run a local development server with the following command:

      This will start a server on your localhost, usually on port :8080. Open your web browser of choice and visit localhost:8080 to find the following:

      A view of the airport data rendered on cards, with the airport abbreviation, full name, and location rendered in black, sans-serif font.

      Now that you have your sample project set up, you’ll next explore built-in events using the v-on directive. When this event is fired, an alert pop-up box will appear with the airport code of the airport associated with that event.

      Step 2 — Listening for Events With the v-on Directive

      As stated earlier, events are a way to execute functions when the user interacts with HTML elements in the DOM (Document Object Model). When writing vanilla JavaScript, to execute a function on an event, you may write something called an event listener. An event listener is a function that waits for that interaction to occur, then executes some code. With Vue, however, you can use the v-on directive for this purpose. A directive is a piece of re-useable code that a developer can use in order to manipulate the DOM. The v-on directive is provided by Vue.js out of the box.

      In this step, you will create a function in your application that runs when a user clicks on a card. Open the src/components/AirportCard.vue component in your text editor of choice.

      Create a function that alerts the user of the airport that they clicked on by adding the following highlighted code:

      favorite-airports/src/components/AirportCard.vue

      ...
      <script>
      export default {
        props: {
          airport: {
            type: Object,
            required: true
          }
        },
        setup() {
          function selectAirport(airport) {
            alert(`You clicked on ${airport.abbreviation}. It's located in ${airport.city}, ${airport.state}.`)
          }
      
          return { selectAirport }
        }
      }
      </script>
      ...
      

      In Vue.js 3, reactive functions need to be defined and exported in the setup component method. This tells Vue that it can execute the selectAirport function in the <template>.

      With the function defined, you’ll now attach it to an event on an HTML element. As stated before, you can use the v-on directive and attach an event with the name of click; this is an event provided by Vue.js. In the AirportCard.vue component, add the v-on directive to the wrapper <div>:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport" v-on:click="selectAirport(airport)">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      ...
      

      Once you have added this code, save and exit the file.

      Now, when you click on a card, an alert will pop-up with the message provided. If you click on CVG for example, you will find the following:

      Vue site with alert pop-up that reads "localhost:8080 says You clicked on CVG. It's located in Hebron, KY."

      The click event is not the only event that is provided to you out-of-the-box by Vue.js. In fact, you can use v-on any native JavaScript event, like:

      • keyup
      • mouseover
      • focus
      • mouseenter
      • change

      Next, you will change this v-on:click listener to mouseover to illustrate how Vue.js listens for events. mouseover is an event that fires whenever a mouse cursor moves over an HTML element.

      Open up src/components/AirportCard.vue again and update your file with the following highlighted code:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport" @mouseover="selectAirport(airport)">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      

      As shown here, Vue also has shorthand syntax for v-on: events. To use the shorthand syntax, you replaced v-on with @. Save and exit the file.

      Now when you visit localhost:8080 and hover over a card, that function will execute and display a native alert.

      This functionality is good for testing purposes, but may be undesired since it displays the alert every time a user hovers over it. A better experience might be to only display it the first time a user hovers over that card. In vanilla JavaScript, you may track the amount of times a user hovers over a card, then prevent further executions. Vue.js has event modifiers that you can leverage to accomplish the same thing with less code.

      In the next section, you are going to explore event modifiers and use them for a better user experience.

      Step 3 — Using Event and Key Modifiers

      In the previous section, you executed a function on the click and mouseover events. You also learned about the Vue.js shorthand for v-on events. Now you will expand on this further by attaching a modifier to this mouseover event so your function executes only once.

      Vue.js provides a number of event modifiers for you. Some of these include:

      • .stop: stops event propagation
      • .prevent: prevents the HTML element’s default behavior
      • .capture: handles an event targeting an inner element before the selected element
      • .self: only triggers the handler if event.target is the element itself
      • .once: only executes the function once
      • .passive: enables the element’s default behavior to happen immediately instead of waiting for the event, which can be used for optimizing performance for scroll on mobile devices

      In this case, you’ll use the .once modifier. In your text editor, open the AirportCard.vue component and add the modifier to the existing mouseover event:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport" @mouseover.once="selectAirport(airport)">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      

      Save the file. Visit your application in the browser and you’ll find that the event only fires once on the first mouseover event.

      Next, you’ll continue exploring modifiers by using key modifiers. These key modifiers are associated with keystroke events, such as keyup. For this next part, imagine that you want to make this clicking action a little more explicit. One way you can do that is by adding a key modifier to the @click event on the .airport <div> in your template.

      To do that, change the @mouseover to @click and add the .shift modifier:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport" @click.shift="selectAirport(airport)">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      

      Save the changes and open the application in your browser. If you click on a card without holding the SHIFT key, the alert does nothing. Now, try holding down the SHIFT key when clicking on a card. Your function will now execute, and you will receive an alert.

      In this section, you learned about Vue’s built-in events and the modifiers associated with those events. You can get a lot done with these built-in events, but there will be times when you’ll need to have a custom event. In the next section, you’re going to use custom events to emit an action up to a parent so that it will execute a function.

      Step 4 — Creating Custom Events

      When developing applications in Vue.js, there will be times when you need to pass data up to a parent component via a custom event. Props are read-only data that are passed down to a child from the parent, but a custom action via an $emit is the opposite of that. To create the most reusable components, it’s best to think of these as functions. You pass data down through props (arguments), and emit values back up to the parent (a return value).

      To emit an event from the child component to the parent, you use the $emit function. Before implementing this, this tutorial will guide you through an example to demonstrate how this works.

      The $emit function accepts two arguments: the action name (a string), and the value to pass up to the parent. In the following example, when the user clicks on the button, you are sending the value CVG to the parent component under the action favoriteAirport:

      ChildComponent.vue

      <template>
        <button @click="$emit('favoriteAirport', 'CVG')">A button</button>
      </template>
      

      In the parent component, you would use the v-on directive and listen for the favoriteAirport event. When this custom event is fired, the code will do something with the value:

      ParentComponent.vue

      <template>
        <child-component @favoriteAirport="favoriteAirport = $event" />
      </template>
      
      <script>
      import { ref } from 'vue'
      export default {
        setup() {
          const favoriteAirport = ref('')
      
          return { favoriteAirport }
        }
      }
      </script>
      

      The value of the event will be $event. In this case, $event is actually CVG, which you then store in a reactive data property called favoriteAirport.

      Now that you know what a custom event looks like, you will put it into practice by implementing this custom event into your application.

      Open the AirportCards.vue component in your text editor. In the @click event, remove the reference to the function and replace it with $emit("favoriteAirport", airport). Remember, the first arugment is the name of the event and the second is the value that you are emitting:

      favorite-airports/src/components/AirportCard.vue

      <template>
        <div class="airport" @click="$emit('favoriteAirport', airport)">
          <p>{{ airport.abbreviation }}</p>
          <p>{{ airport.name }}</p>
          <p>{{ airport.city }}, {{ airport.state }}</p>
        </div>
      </template>
      ...
      

      Save the file. Now, when the user clicks on the airport card, a custom event will fire and pass up that airport object.

      Next, open src/App.vue to add some HTML to the template. You will show the favorite airports list after the six cards that are already present:

      favorite-airports/src/App.vue

      <template>
        <div class="wrapper">
          <div v-for="airport in airports" :key="airport.abbreviation">
            <airport-card :airport="airport" />
          </div>
          <h1 v-if="favoriteAirports.length">Favorite Airports</h1>
          <div v-for="airport in favoriteAirports" :key="airport.abbreviation">
            <airport-card :airport="airport" />
         </div>
        </div>
      </template>
      
      <script>
      import { ref } from 'vue'
      import allAirports from '@/data/airports.js'
      import AirportCard from '@/components/AirportCard.vue'
      
      export default {
        components: {
          AirportCard
        },
        setup() {
          const airports = ref(allAirports)
          const favoriteAirports = ref([])
      
          return { airports, favoriteAirports }
        }
      }
      </script>
      ...
      

      In this code snippet, you are creating a reactive data property called favoriteAirports, which is an empty array. In the <template>, you iterate through the empty array to render the <airport-card /> components, much like you did in an earlier step.

      Now you need to add the v-on event for your custom event:

      favorite-airports/src/App.vue

      <template>
        <div class="wrapper">
          <div v-for="airport in airports" :key="airport.abbreviation">
            <airport-card :airport="airport" @favoriteAirport="favoriteAirports.push($event)" />
          </div>
          <h1 v-if="favoriteAirports.length">Favorite Airports</h1>
          <div v-for="airport in favoriteAirports" :key="airport.abbreviation">
            <airport-card :airport="airport" />
         </div>
        </div>
      </template>
      ...
      

      In the @favoriteAiport custom event, you used the JavaScript push() method to add the airport from the child ($event) to the favoriteAirports reactive data property.

      Open you browser and navigate to your project at localhost:8080. When you click on one of the airport cards, that card will appear under Favorite Airports.

      Vue airport app with a list of favorite airports that includes the CVG airport card.

      In this section, you learned about custom events, what they are, and how to use them. A custom event is a way to pass data up to a parent component through the $emit function provided by Vue. Once that data has been emitted, you can further manipulate it in the parent component, like adding it to an array.

      Conclusion

      In this tutorial, you learned how Vue.js listens for a number of built-in events, such as click and mouseover. In addition to that, you tried out event and key modifiers, small pieces of code that you appended to your event to provide additional functionality. With this, you set up your app to execute the function once with the .once modifier and to only fire when holding down the SHIFT key using the .shift modifier.

      Vue provides an efficient way to listen for events that lets you focus on manipulating data over manually setting up event listeners. In addition to that, Vue allows you to think of components as functions: They accept data props and can return a value with $emit.

      To learn more about Vue components, it is recommended to read through the Vue documentation. For more tutorials on Vue, check out the How To Develop Websites with Vue.js series page.



      Source link

      What Is User Experience (And How Can You Use It to Build a Site That Suits Your Audience)?


      What a time to be alive!

      Beginners with no coding experience can now build a website with minimal effort and expense. Even better, the options are limitless: You’ve got an entire arsenal of colors, fonts, images, and buttons at your disposal. But with so many design elements to play with, it can be tempting to go a bit wild.

      “A sprinkle of animation here! A dash of cheetah print there!”

      But, as is often the case with things that glitter, it’s easy to go overboard — especially if your creativity is reducing the functionality of your site.

      Whether you want to sell a product or share some blog posts, you’re not really building the website for you. It’s your site’s visitors that need to be happy with the design and user interface. That’s where User Experience (UX) comes into play. Keeping a strong focus on UX while building your site should pay off in higher conversions and lower bounce rates.

      In this article, I’ll give you a crash course in UX and explain what a UX designer does. Then we’ll go over some tips on recognizing good UX design when you encounter it. Finally, I’ll show you how to use UX to create a better website for your audience. Feel free to jump ahead to the section that’s most beneficial to you!

      Ready to talk UX strategy? Let’s get started!

      An Introduction to User Experience (UX) and Why It Matters

      Simply put, User Experience (UX) is how interacting with technology makes a user feel. UX applies to any technology, from an app to a game console.

      When it comes to websites, UX design is about optimizing the interaction between the human user and the page. A site built with solid UX principles should leave the user feeling like they accomplished what they came to do without frustration.

      That may make you think of going all out with the website’s visual design. That might include flashy animations and gigantic image carousels. If you remember MySpace, you probably still have nightmares about animated glitter and MIDI versions of Blink-182 songs . . . yikes.

      A MySpace profile using lots of bright colors and glitter.

      But UX design has a lot less to do with how a site looks than how it’s used. To be effective, your website should be a complete experience — not just words and images on a page.

      Users will forget data, such as how much they paid for the products they ordered. However, the experience of ordering should be pleasant and effortless. That experience will stay with them, increasing the odds that they’ll buy from you time and again.

      If your site delivers a poor UX, you may see the opposite result. Users who become stressed out or angry when using your site will likely head to one of your competitors’ sites. They have many options and no reason to return to a website that’s difficult to use.

      If you’re still not convinced that UX matters to your website, here are a few key statistics:

      All of this serves to illustrate the importance of good UX design when building a website.

      The Role of the UX Designer

      UX is so vital there’s an entire profession dedicated to optimizing it. A UX designer’s day-to-day tasks will vary based on what kinds of projects they’re tackling. However, the goal is usually the same. The UX designer’s job is to optimize the user’s experience when interacting with digital technology while also keeping in mind the well-being of the business.

      To achieve this balancing act, the UX designer follows a process that results in multiple deliverables.

      Before any actual designing starts, there’s a lot of UX research to do. Therefore, the designer may first create one or more audience personas. This enables the designer to understand the user’s needs.

      Next, the UX designer may present a potential user flow diagram to help explore possible ways that a user may interact with the website. They can then translate that information into a prototype. Prototypes may be as basic as a wireframe, a rough blueprint for what a final web page could look like. The designer may also create a more visually-robust prototype or even one that can be interacted with.

      A basic wireframe for designing a website.
      A basic wireframe.

      The UX designer’s responsibilities don’t end with the final design. Once the site is launched, they may conduct usability testing or look into usage analytics to identify and fix potential problems.

      In other words, they’re involved with all stages of a website’s creation and launch.

      How to Recognize Good UX Design

      If you’re handling your own UX design, it’s your responsibility to advocate for your audience while ensuring that you’re still getting what you want from your site. To do that, the first step is to learn how to recognize robust UX design.

      With that in mind, let’s look at some examples of UX in the wild. There are four key elements you’ll want to pay close attention to.

      1. Navigation

      Poor navigational design can render any website useless. Moving through a site should be smooth and intuitive. The navigation menu should also be accessible no matter what device a visitor is using.

      Breadcrumb navigation is one way designers prevent users from getting lost, especially if a website has many pages.

      H-E-B’s website, using a navigation bar and breadcrumbs.

      It’s also important to pay attention to links. Web designers who employ strong UX make sure you can identify links when you see them. This often means underlining them and using a different text color. They’ll also use meaningful anchor text, so you know where the link is taking you before clicking on it.

      2. Content

      A significant part of successful UX is understanding how people interact with different parts of a website. For example, most people don’t read web page content normally. They scan it and then stop to read if they’ve found something interesting.

      Content is scannable if a user can quickly browse through a blog post or sales page and come away with a clear idea of what it’s communicating.

      Content made scannable using headings, short paragraphs, and a bulleted list.

      Keeping paragraphs short is one way to create scan-friendly content. Those paragraphs should be broken up frequently with headings, lists, and images. Designers may also make use of pull-quotes, bolded text, and similar elements.

      3. Animation

      Animation is an effective way to stand out from a sea of websites and grab a user’s attention. It adds an element of fun and can contribute to creating a memorable experience for the user.

      However, there’s a right and a wrong way to go about implementing it.

      Subtle animation can provide feedback while you wait for a transaction to complete. An animation can also loop endlessly while you struggle to focus on reading a product description. These approaches create two very different experiences. The overuse of animation can also affect UX on mobile devices.

      4. Responsiveness

      Optimizing a website for mobile users is a must. If you’re like most people, you usually use your phone to access the internet. If you come across a site that you have to struggle to use on your device, you’re likely to simply abandon it.

      Beyond choosing a responsive theme, you can take additional steps to ensure that your site works well on all screens. For example, you can run your website through Google’s Mobile-Friendly Test Tool.

      Sample results of Google’s Mobile-Friendly Test Tool.

      This tool will alert you to issues that are keeping your site from being mobile-friendly. You may find that a particular font is too difficult to read on a tiny screen, for instance, or that buttons are too small to tap easily.

      How to Use UX to Design a Site for Your Audience

      Now that you know what good UX is, how do you apply it to your site?

      You probably won’t be doing intensive market research or prototyping with high-fidelity wireframes. Still, putting on your UX designer hat can help you create a site that both you and your audience will love.

      First, it’s important to be clear about why you have a website and what you want it to do. For example, are you:

      Next, get to know your ideal user or potential customer. Creating a user persona will help you imagine how your target audience may interact with your website. This persona can be as simple as who the person is, what they want, and what keeps them from getting it. Crucially, you must identify what the user needs to be successful on your site.

      Remember that accessibility is an integral part of UX. You may have visitors who use assistive technology, so consider making accessibility a priority when building your site.

      You can also check out your competitors’ sites to see what’s working for them. Is the shopping cart icon always in the upper-right corner? Maybe yours should be, too. You can be creative without reinventing the wheel; users shouldn’t have to figure out how your site works to accomplish their goals.

      Sample results from Google’s PageSpeed Insights.

      Finally, website performance matters for UX. Slow pages will cause visitors to leave before the site has a chance to load. There are many ways to speed up your site, although your best bet is to start with quality hosting.

      Building a Better User Experience?

      Partner with DreamHost. We’ll make sure your website is fast, secure, and always up so your visitors trust you. Plans start at $2.59/mo.

      UX Resources

      At this point, you’ve likely figured out that UX design isn’t something you optimize in one shot. There’s a lot more to this field than we can cover in one article.

      UX Matters’ home page, which uses an infographic for navigation.

      Fortunately, there are many quality UX resources you can refer to as you continue to improve your website:

      • Awwwards is where you can find inspiration. Grab some coffee; you’ll probably be scrolling for a while.
      • UXmatters covers just about everything related to design. There’s content for everyone — from the seasoned UX strategist, UX researcher, UI designer, or graphic designer to brand-new UX enthusiasts.
      • UX Magazine publishes the latest news, timely insights, and UX research for anyone interested in improving their visitors’ digital experience.
      • Stack Overflow is the place for all your burning questions. It’s an open community of helpful, knowledgeable people.
      • Website and Digital Marketing Help is a Facebook group powered by DreamHost where website owners of all levels can share best practices and ideas.

      If you combine these resources with research and practice, you should find yourself implementing good user experience practices in no time.

      Design a Great User Experience

      You don’t need to be a professional UX designer to build a website your audience will love interacting with. All it takes is some understanding of what will make life easier for your visitors and a willingness to build a site that provides that experience.

      UX describes what the experience of interacting with your website is like for users. Optimizing your site’s UX means ensuring that it has clear navigation, creating content that’s easy to scan, testing it for responsiveness, and more. There’s a lot to learn, but there are also plenty of useful resources and knowledgeable designers who can help.

      After that, you’ll be ready to conquer the internet with your UX-optimized website! You can check some of the performance-related tasks off your list early with our high-quality shared website hosting plans.



      Source link

      How to Position Your Idea with User Research


      How to Join

      This Tech Talk is free and open to everyone. Register below to get a link to join the live event.

      Format Date RSVP
      Presentation and Q&A August 11, 2020, 12:00–1:00 p.m. ET

      If you can’t join us live, the video recording will be published here as soon as it’s available.

      About the Talk

      After quick-and-dirty validation of your idea, now what? How do you know when to prioritize user feedback, iterate, or completely pivot? In this Tech Talk, Colleen Diez, Lead User Researcher at DigitalOcean, will present some easy and effective research tools that help you use research to guide product development and customer satisfaction.

      What You’ll Learn

      • Research methods to prioritize the right potential new features to build
      • How to target customers based on their internal motivations
      • How to use quality metrics to iterate for launch
      • Tips for synthesizing and making sense of your research data
      • When to know if you have found the right audience, or if it’s time to change strategy

      This Talk is Designed For

      • Entrepreneurs
      • Startups
      • Small-to-medium sized businesses

      About the Presenter

      Colleen Diez is currently the Lead User Researcher for DigitalOcean. A former XML/XSLT developer, she loves making connections, finding patterns in information, and telling stories about people and technology.



      Source link