martech-is-different-check-out-the-agenda.

The MarTech Conference is for forward-thinking, senior-level marketers who are convinced that modern marketing is agile, customer-centric, decentralized, process-driven, people-powered… and technology-enabled.

If your organization is moving from one in which marketing is assisted by martech to one where martech is absorbed in marketing, and if you agree that martech is marketing — this conference is for you.

Join us April 15-17 in San Jose to push the limits of marketing execution, process, and people. The all-new agenda is live and ready for you to explore! You’ll unlock creative, vendor-agnostic solutions and actionable tactics for overcoming everyday marketing challenges, like…

  • Structuring marketing teams and stacks to ensure organizational success
  • Benchmarking multi-channel stacks to thrive in 2020 and beyond
  • Modernizing social media martech to unlock innovation opportunities
  • Fostering unified enterprise workflow to enable more efficient marketing
  • Leveraging APIs to help meet customer expectations

…and dozens more. Each editorial track — Marketing Operations, Marketing Data, Marketing Technology, and Marketing Orchestration — tackles a pillar of your profession; each session delivers practical advice and insights you can implement immediately.

Keynotes from digital analyst Brian Solis, SalesForce Principal of Marketing Insights, Mathew Sweezey, and communications expert Nancy Duarte will inspire, inform, and empower. You’ll learn how to leverage AI to improve customer experiences, motivate buyers in an age of infinite media, and use data to tell compelling, humanizing narratives.

Don’t miss this opportunity to learn first-hand from some of the world’s most successful brands, including Wells Fargo, Lyft, DocuSign, Salesforce, CaringBridge, GrubHub, Vonage, Gartner, Twitter, and many more.

Like what you see? Check out the complete agenda!

Ready to register? Choose your pass based on goals and budget:

  • All Access: Complete access to all conference sessions, keynotes, networking events, exhibiting martech companies, sponsor presentations, amenities, and more. Book today and enjoy $450 off on-site rates.
  • All Access Workshop Combo (best value!): Dive deeper and learn more with a half-day, pre-conference workshop. These expert-led workshops deliver a unique opportunity to train in an immersive, intimate environment. Book today and enjoy $900 off on-site rates! (Workshop-only passes are also available.)
  • Expo : Searching for marketing technology? Focused on growing your network? Pick up a free Expo pass to enjoy unlimited Expo Hall access, full-length Solution Track sessions, sponsor presentations in the Discover MarTech Theater, downloadable speaker presentations, refreshments, WiFi, and more.
  • Team Rates: MarTech is a fabulous option for your 2020 company outing. Attend as a group for a unique team-building experience and lock in extra savings while you’re at it!

Alpha rates expire February 15… book now to enjoy these fantastic savings. Once they’re gone, they’re gone.

See you in San Jose 🙂

Psst… Don’t miss your chance to earn worldwide recognition from the MarTech community! Submit your marketing technology stack to the 2020 Stackie Awards to join the ranks of past winners including Cisco, Marin Software, Merkle, and more.


Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.



About The Author

Scott Brinker is the conference chair of the MarTech® Conference, a vendor-agnostic marketing technology conference and trade show series produced by MarTech Today’s parent company, Third Door Media. The MarTech event grew out of Brinker’s blog, chiefmartec.com, which has chronicled the rise of marketing technology and its changing marketing strategy, management and culture since 2008. In addition to his work on MarTech, Scott serves as the VP platform ecosystem at HubSpot. Previously, he was the co-founder and CTO of ion interactive.



how-to-create-7-different-css-hover-effects-from-scratch

Difficulty:BeginnerLength:LongLanguages:

In today’s tutorial, we’re going to create 7 different CSS hover effects. We’ll learn loads along the way, including how to animate font icons, borders, and SVG paths. You’ll be able to apply these CSS hover effects to all kinds of situations. Let’s dive in!

Just to give you an idea of what you’ll learn during this tutorial, check out one of the demos we’ll be building:

Let’s start with this one, see you in the first step..

1. Revealing Icon CSS Hover Effect

In this first example, we’ll explore the demo you’ve already seen: a hover effect where text is replaced by an icon with a slide animation.

The animation in action

Start with the Page Markup

We’ll start with a plain unordered list which will represent a typical page menu. Each menu link will include two span elements. The first span will contain the anchor text, while the second one will hold a Font Awesome icon:

Specify the Styles

The list will be a flex container with horizontally centered content:

.menu {
  display: flex;
  justify-content: center;
}

Note: This basis style will be added to all the demos we build, so we won’t discuss it again. The demo also has some aesthetic styles we’ll reuse every time (such as the dark background etc.) which you can copy from the CodePen demo.

The first span in each item will have some padding around it:

.menu a span:first-child {
  display: inline-block;
  padding: 10px;
}

Then the second span will be absolutely positioned and hidden by default. Plus, its icon will be horizontally and vertically centered:

.menu a {
  display: block;
  position: relative;
  overflow: hidden;
}

.menu a span:last-child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
}

Each time we hover over a link, its text will disappear. On the other hand, at that point the associated icon will become visible:

.menu a span {
  transition: transform 0.2s ease-out;
}

.menu a:hover span:first-child {
  transform: translateY(100%);
}

.menu a:hover span:last-child {
  transform: none;
}

Happily enough, there’s the option to modify the direction of the slide animations according to our needs. By default during the hover animation, the icon will appear from top to bottom, while the text will be moved to the bottom. To change that behavior, we have to pass the data-animation attribute to the target list. Possible values are to-top, to-right, and to-left.

The corresponding styles are shown below:

.menu[data-animation="to-top"] a span:last-child {
  transform: translateY(100%);
}

.menu[data-animation="to-top"] a:hover span:first-child {
  transform: translateY(-100%);
}

.menu[data-animation="to-right"] a span:last-child {
  transform: translateX(-100%);
}

.menu[data-animation="to-right"] a:hover span:first-child {
  transform: translateX(100%);
}

.menu[data-animation="to-left"] a span:last-child {
  transform: translateX(100%);
}

.menu[data-animation="to-left"] a:hover span:first-child {
  transform: translateX(-100%);
}

Here’s the full CodePen demo that summarizes the aforementioned cases:

2. Revealing Swipe CSS Hover Effect

In this second example we’ll continue with another hover effect where text is replaced by a Font Awesome icon. But, this time, the replacement will happen in the background and won’t be visible to us, thanks to a “swipe” which happens in the foreground:

The animation in action

Specify the Page Markup

As ever, we’ll start with an unordered list which will contain the page links. In this case though, each of our links will have a data-icon attribute. The value of this attribute will match the Unicode respresentation of a Font Awesome icon:

Specify the Styles

We’ll then define the ::before and ::after pseudo-elements of all links. 

  • The ::before pseudo-element will be positioned in the center of the link, though it will initially be invisible. 
  • The ::after pseudo-element will cover the full link dimensions, but it will also be hidden by default. Its content will hold a Font Awesome icon stored in the relevant data-icon attribute:
:root {
  ...
  --text-color: #aaaebc;
  --timing-function: cubic-bezier(0.82, 0.2, 0.42, 1);
}

.menu a {
  position: relative;
  overflow: hidden;
}

.menu a::before,
.menu a::after {
  position: absolute;
  left: 0;
  width: 100%;
}

.menu a::before {
  content: ’’;
  top: 50%;
  transform: translate(-101%, -50%);
  height: 50%;
  z-index: 1;
  background: var(--text-color);
}

.menu a::after {
  content: attr(data-icon);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-color);
  opacity: 0;
}

Each time we hover over a link, first the ::before pseudo-element will quickly appear. Then, it will be moved to the right and the icon will appear. During that time, the anchor text color will set to transparent. 

To achieve this precise timing synchronization, we have to customize the transitions speed. For instance, we’ll add delays to the links as well as their ::after pseudo-element:

/*CUSTOM VARIABLES HERE*/

.menu a {
  transition: color 0s 0.25s var(--timing-function);
}

.menu a::before {
  transition: transform 0.5s var(--timing-function);
}

.menu a::after {
  transition: opacity 0s 0.25s var(--timing-function);
}

.menu a:hover {
  color: transparent;
}

.menu a:hover::before {
  transform: translate(101%, -50%);
}

.menu a:hover::after {
  opacity: 1;
}

If you prefer a reversed animation, just add the data-animation="to-left" attribute to the corresponding list:

The animation in action

Here’s the Codepen demo that covers both cases:

3. Animated Underline CSS Hover Effect

In our third example we’ll look at a common hover effect where an underline is revealed with a slide animation:

The animation in action

Specify the Page Markup

We’ll start with an unordered list which will store the page links:

Specify the Styles

We’ll then define the ::before pseudo-element for all the links. We’ll place it to the bottom of its container and give it translate: scaleX(0), so it will initially be hidden. 

In addition, we’ll apply transform-origin: left to it because we want the animation to start from left to right:

.menu a {
  position: relative;
}

.menu a::before {
  content: ’’;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #b47dcd, #e878a2, #eb85ab);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}

Each time we hover over a link, its pseudo-element will appear:

.menu a:hover::before {
  transform: scaleX(1);
}

Similarly to the previous example, we have the option to change the direction of the slide animation. The line will appear from left to right by default, but to change that behavior, we have to pass the data-animation attribute to the target list. Possible values are to-left and center.

The corresponding styles are as follows:

.menu[data-animation="to-left"] a::before {
  transform-origin: right;
}

.menu[data-animation="center"] a::before {
  transform-origin: center;
}

Bonus!

We can go things one step further and change the transform-origin property value of the pseudo-element depending on its state. This makes the underline appear from one side, and disappear from the other:

The animation in action

Here are the rules that implement this functionality:

.menu[data-animation="bonus"] a::before {
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
}

.menu[data-animation="bonus"] a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.82, 0.94);
}

Here’s the CodePen demo for the scenarios we discussed:

4. Multiline Animation CSS Hover Effect

Moving on, in this fourth example we’ll cover a hover effect where multiple lines will be revealed sequentially. The beauty of this technique is that it will give us the impression that the border of the hovered element is being painted. How cool is that!

Note: this effect can also be achieved with SVG, and we’ll look at something similar in a later demo.

The animation in action

Specify the Page Markup

Again, our markup will consist of an unordered list. Each of the menu links will contain four empty span elements:

Specify the Styles

The span elements will be absolutely positioned and hidden by default. However, their position and transform-origin will be different:

.menu .border {
  position: absolute;
  left: 0;
  background: currentColor;
}

.menu .border-top,
.menu .border-bottom {
  width: 100%;
  height: 1px;
  transform: scaleX(0);
}

.menu .border-left,
.menu .border-right {
  width: 1px;
  height: 100%;
  transform: scaleY(0);
}

.menu .border-top,
.menu .border-left,
.menu .border-right {
  top: 0;
}

.menu .border-bottom {
  bottom: 0;
  transform-origin: bottom right;
}

.menu .border-top {
  transform-origin: top left;
}

.menu .border-left {
  transform-origin: bottom left;
}

.menu .border-right {
  left: auto;
  right: 0;
  transform-origin: top right;
}

As we hover over a link, its spans will become visible sequentially, following a clockwise rotation. To do so, we’ll control when the second, third, and fourth spans become visible:

:root {
  ...
  --transition-duration: 0.2s;
  --transition-delay: 0.2s;
}

.menu .border {
  transition: transform var(--transition-duration) ease-in-out;
}

.menu a:hover .border-top,
.menu a:hover .border-bottom {
  transform: scaleX(1);
}

.menu a:hover .border-left,
.menu a:hover .border-right {
  transform: scaleY(1);
}

.menu a:hover .border-right {
  transition-delay: var(--transition-delay);
}

.menu a:hover .border-bottom {
  transition-delay: calc(var(--transition-delay) * 2);
}

.menu a:hover .border-left {
  transition-delay: calc(var(--transition-delay) * 3);
}

By modifying the transform-origin property value and canceling the delays of our elements, we can easily generate another nice effect:

The animation in action

To incorporate this effect in our menu, we have to append the data-animation="diagonal" attribute to it. This will result in the following CSS styles:

.menu[data-animation="diagonal"] .border-left {
  transform-origin: top left;
}

.menu[data-animation="diagonal"] .border-right,
.menu[data-animation="diagonal"] .border-bottom {
  transform-origin: bottom right;
}

.menu[data-animation="diagonal"] a:hover [class^=border]{
  transition-delay: 0s;
}

Take a look at the CodePen demo that gives us those effects:

5. Animated Circle SVG Hover Effect

In this fifth example, we’ll walk through a hover effect where an SVG path is animated, encircling our link. The technique we’re going to use isn’t something new; in actual fact, Jake Archibald wrote about it some years ago.

The animation in action

Specify the Page Markup

Once more, we’ll start with an unordered list, but this time we’ll include an SVG nested inside each link:

The SVG will be an ellipse and is represented via the path element. We’ll give it preserveAspectRatio="none" because, as we’ll see in a moment, it should cover the full parent dimensions, even if it’s stretched.

Specify the Styles

The SVG will be absolutely positioned and centered within its container. Plus, as mentioned above, it will be big enough to cover the anchor text:

.menu a {
  position: relative;
}

.menu a svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  z-index: -1;
}

The path element will have a stroke and its fill color will be transparent:

.menu a svg path {
  fill: transparent;
  stroke-width: 5px;
  stroke: currentColor;
}

To animate the path, we’ll need two additional properties. Specifically, the stroke-dasharray and stroke-dashoffset properties. 

The stroke-dasharray property is responsible for creating dashes/gaps in our stroke. For example, by setting stroke-dasharray: 50 to the path, it will look as follows:

The svg with dashes around it

The stroke-dashoffset property is responsible for changing the position (offsetting) of those dashes.

So here’s the trick:

  • First, the value of the stroke-dasharray property should match the length of the path. Instead of guessing it, JavaScript provides a handy way for grabbing it through the getTotalLength() method. 
  • Next, we’ll also assign the resulting value (or its negative one for a reversed effect) to the stroke-dashoffset property. This neat combination will hide the SVG. 
  • Then, each time we hover over a link, we’ll run an animation which will move the stroke-dashoffset property value to 0. As a result of that, the path will be gradually “drawn”.

With all the above in mind, let’s first retrieve the path’s length (just for the first path) via JavaScript:

document.querySelector("li:nth-child(1) path").getTotalLength();
//1210.709716796875;
// you might see slightly different values depending on your browser

Then, we’ll assign this value to the corresponding properties:

.menu a svg path {
  stroke-dasharray: 1210.709716796875;
  stroke-dashoffset: -1210.709716796875; /*or the positive one*/
  transition: stroke-dashoffset .5s cubic-bezier(.29,.68,.74,1.02);
}

.menu a:hover svg path {
  stroke-dashoffset: 0;
}

Lastly, as an improvement, instead of hard coding the stroke-dasharray and stroke-dashoffset values, we could have specified them dynamically through JavaScript (see if you can do that bit yourself!).

Here’s the final demo, which gives us a cool chalkboard hover effect:

6. SVG Wavy UnderLine Hover Effect

Now that we know the basic principles behind the SVG path animation, let’s have a quick look at two other very similar examples. In both examples, there won’t be any need to stretch the SVGs, so we won’t make use of the preserveAspectRatio="none" attribute.

The first one will reveal a wavy underline.

The animation in action

Here’s the demo:

7. Pointing SVG Arrow Hover Effect

The third SVG demo will reveal an Iconmonstr icon (a pointing arrow). 

The animation in action

Here’s the demo for you to reverse engineer:

Conclusion

That concludes another tutorial, folks! It was quite a long journey, but I hope that you enjoyed it and have learned some new things which you will include in your front-end toolkit.

Last but not least, I have added all the demos of this tutorial to a CodePen collection. Be sure to check it out and give it some love!

I’d love to see your favorite CSS hover effects. They can come from CodePen, an inspirational website, or somewhere else. Don’t forget to share them with us in the comments section.

As always, thanks a lot for reading!

More CSS and JS Hover Effect Tutorials

Learn how to create even more interesting CSS hover effects with these Tuts tutorials:

comparing-the-different-types-of-native-javascript-popups

JavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:

alert("Hello, World!");

The UI for this varies from browser to browser, but generally you’ll see a little window pop up front and center in a very show-stopping way that contains the message you just passed. Here’s Firefox and Chrome:

Native popups in Firefox (left) and Chrome (right). Note the additional UI preventing additional dialogs in Firefox from triggering it more than once. You can also see how Chrome is pinned to the top of the window.

There is one big problem you should know about up front

JavaScript popups are blocking.

The entire page essentially stops when a popup is open. You can’t interact with anything on the page while one is open — that’s kind of the point of a “modal” but it’s still a UX consideration you should be keenly aware of. And crucially, no other main-thread JavaScript is running while the popup is open, which could (and probably is) unnecessarily preventing your site from doing things it needs to do.

Nine times out of ten, you’d be better off architecting things so that you don’t have to use such heavy-handed stop-everything behavior. Native JavaScript alerts are also implemented by browsers in such a way that you have zero design control. You can’t control *where* they appear on the page or what they look like when they get there. Unless you absolutely need the complete blocking nature of them, it’s almost always better to use a custom user interface that you can design to tailor the experience for the user.

With that out of the way, let’s look at each one of the native popups.

window.alert();

window.alert("Hello World");



const button = document.querySelectorAll("button");
button.addEventListener("click", () => {
  alert("Text of button: "   button.innerText);
});

See the Pen


alert(“Example”);
by Elliot KG (@ElliotKG)


on CodePen.

What it’s for: Displaying a simple message or debugging the value of a variable.

How it works: This function takes a string and presents it to the user in a popup with a button with an “OK” label. You can only change the message and not any other aspect, like what the button says.

The Alternative: Like the other alerts, if you have to present a message to the user, it’s probably better to do it in a way that’s tailor-made for what you’re trying to do.

If you’re trying to debug the value of a variable, consider console.log("`Value of variable:"`, variable); and looking in the console.

window.confirm();

window.confirm("Are you sure?");



let answer = window.confirm("Do you like cats?");
if (answer) {
  // User clicked OK
} else {
  // User clicked Cancel
}

See the Pen


confirm("Example");
by Elliot KG (@ElliotKG)


on CodePen.

What it’s for: “Are you sure?”-style messages to see if the user really wants to complete the action they’ve initiated.

How it works: You can provide a custom message and popup will give you the option of “OK” or “Cancel,” a value you can then use to see what was returned.

The Alternative: This is a very intrusive way to prompt the user. As Aza Raskin puts it:

...maybe you don’t want to use a warning at all.”

There are any number of ways to ask a user to confirm something. Probably a clear UI with a wired up to do what you need it to do.

window.prompt();

window.prompt("What’s your name?"); 

let answer = window.prompt("What is your favorite color?");
// answer is what the user typed in, if anything

See the Pen


prompt("Example?", "Default Example");
by Elliot KG (@ElliotKG)


on CodePen.

What it’s for: Prompting the user for an input. You provide a string (probably formatted like a question) and the user sees a popup with that string, an input they can type into, and “OK” and “Cancel” buttons.

How it works: If the user clicks OK, you’ll get what they entered into the input. If they enter nothing and click OK, you’ll get an empty string. If they choose Cancel, the return value will be null.

The Alternative: Like all of the other native JavaScript alerts, this doesn’t allow you to style or position the alert box. It’s probably better to use a

to get information from the user. That way you can provide more context and purposeful design.

window.onbeforeunload();

window.addEventListener("beforeunload", () => {
  // Standard requires the default to be cancelled.
  event.preventDefault();
  // Chrome requires returnValue to be set (via MDN)
  event.returnValue = '';
});

See the Pen


Example of beforeunload event
by Chris Coyier (@chriscoyier)


on CodePen.

What it’s for: Warn the user before they leave the page. That sounds like it could be very obnoxious, but it isn’t often used obnoxiously. It’s used on sites where you can be doing work and need to explicitly save it. If the user hasn’t saved their work and is about to navigate away, you can use this to warn them. If they *have* saved their work, you should remove it.

How it works: If you’ve attached the beforeunload event to the window (and done the extra things as shown in the snippet above), users will see a popup asking them to confirm if they would like to “Leave” or “Cancel” when attempting to leave the page. Leaving the site may be because the user clicked a link, but it could also be the result of clicking the browser’s refresh or back buttons. You cannot customize the message.

MDN warns that some browsers require the page to be interacted with for it to work at all:

To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with. Moreover, some don't display them at all.

The Alternative: Nothing that comes to mind. If this is a matter of a user losing work or not, you kinda have to use this. And if they choose to stay, you should be clear about what they should to to make sure it’s safe to leave.

Accessibility

Native JavaScript alerts used to be frowned upon in the accessibility world, but it seems that screen readers have since become smarter in how they deal with them. According to Penn State Accessibility:

The use of an alert box was once discouraged, but they are actually accessible in modern screen readers.

It’s important to take accessibility into account when making your own modals, but there are some great resources like this post by Ire Aderinokun to point you in the right direction.

General alternatives

There are a number of alternatives to native JavaScript popups such as writing your own, using modal window libraries, and using alert libraries. Keep in mind that nothing we’ve covered can fully block JavaScript execution and user interaction, but some can come close by greying out the background and forcing the user to interact with the modal before moving forward.

You may want to look at HTML’s native

element. Chris recently took a hands-on look) at it. It’s compelling, but apparently suffers from some significant accessibility issues. I’m not entirely sure if building your own would end up better or worse, since handling modals is an extremely non-trivial interactive element to dabble in. Some UI libraries, like Bootstrap, offer modals but the accessibility is still largely in your hands. You might to peek at projects like a11y-dialog.

Wrapping up

Using built-in APIs of the web platform can seem like you’re doing the right thing — instead of shipping buckets of JavaScript to replicate things, you’re using what we already have built-in. But there are serious limitations, UX concerns, and performance considerations at play here, none of which land particularly in favor of using the native JavaScript popups. It’s important to know what they are and how they can be used, but you probably won’t need them a heck of a lot in production web sites.

different-approaches-to-ux-research
16 September, 2019

UX research helps in the development of analytical techniques used to know the user experience regarding the product. The research should be conducted in such a way keeping in mind who the user is, in what context they use a product and what they need from a product or service. The business owners need to be clear of their resources and constraints before beginning a UX research. Once they are clear, they can start the research. 

Duration of research

The duration of research and what a particular business wants to achieve decides either to choose Longitudinal Research or Cross-sectional research.

Longitudinal Research

Longitudinal research mainly focuses on repeated observation of a group of users over time, at regular intervals. This research is done in order to observe user perceptions, attitudes, and behaviours. The main advantage of longitudinal research is that it extends beyond a single time frame. Because of this, the events can occur in a proper sequence. The longitudinal study can be done in many ways like diaries, participant observation, and repeated interviews/ surveys.

longitudinal ux research

Cross-Sectional Research

Cross-Sectional Research is a study where the feedback is collected from a group of people at a single point of time. Here the users are categorized into different groups named cohorts. It mainly involves assessing customers with one key factor, at a specified time. For this, the business owners invite users and categorize them into two or more groups and take their feedback.

cross sectional ux research

Nature of data

Here, business owners should decide if they require statistical or opinions and other subjective data. Based on this, the quantitative and qualitative research can be done. 

qualitative and quantitative ux research

Quantitative Research

Quantitative research includes anything that you can count: time on page, time to complete a task, user flow, page view. The quantitative study in UX is more often used in market research as it involves large data sets. Here, the research will be done keeping in mind the customer preferences.

Qualitative Research

Qualitative research in UX involves mainly the behaviours, feelings, and attitudes of users. Qualitative research is done in order to understand the factors that influence the customer’s decision to buy a product, experience in using that product and the impact it creates by taking the customer’s feedback.

Source of data

The data can be collected in two ways: through Primary and Secondary research.

Primary research

Primary research is done through interviews, experiments or conducting questionnaires to acquire data. The fresh data is collected rather than the data from the published sources. Primary research is both time and resource-consuming as it requires direct interaction with the customers.

primary research

Secondary Research

Secondary research focuses on analyzing already existing sources like research papers, journals, articles. For those who are having less time and limited resources, Secondary research will be an added advantage as it takes relatively less time.

secondary research

The objective of the Research

The objective of the research is to investigate the problem and trying to fix the problem in the most efficient way. This can be done through Exploratory research, Descriptive research and Evaluative research.

Generative or Exploratory research

Exploratory research is done in order to investigate the problem at the preliminary stage. This research thus involves conducting interviews, group discussions with the customers as per the requirement and identify the problem regarding the product.

generative or exploratory research

Descriptive and Informative research

In descriptive research, the problem statement is already given and is used to gain a detailed understanding of the problem. This research helps in providing the complete solution to the problem after a detailed analysis of the problem.

descriptive and informative research

Evaluative Research

Evaluative research is done by approaching the users and try to find out whether the solution which you got in the Descriptive research works out or not. The main aim of this research is to see if the problem got completely fixed or not.

The outcome of the Research

Pure Research

Pure research is basic research in order to identify the relationship between variables. Pure research is done completely out of curiosity and interest and is more exploratory in nature.

pure research

Applied Research

Applied research is based on basic or pure research. This is done in order to solve the problem identified in the pure research phase. The outcome of this research is mainly used for the present use, not for the future.

applied research

Read more: How is Voice Experience Shaping the Future of UX Design

It is also essential to choose the correct research approach for a product at the correct time. The Nextbrain Studio uses these kinds of approaches for UX researches for better customer satisfaction. 

Our latest news

Hear the unheard news about us, the latest press release and case studies and stay updated .

one-job,-many-roles.-the-different-skills-needed-to-be-a-successful-cto

One job, many roles. The different skills needed to be a successful CTO

Some time ago I came across this article on Harvard Business School’s Working Knowledge blog about when founding CEOs need to go. It’s from 2005, but it is still just as relevant now. The main takeaway is that you need differently skilled people at the helm in different stages of your company and that this transition is not always easy. They talk about founding CEOs, but this is also true for CTOs, whether they are founders or not.

Success or failure, you may need a different profile

In the HBS article, they discuss two situations in which a CEO needs replacement, specifically in an early stage of a smaller company. The obvious scenario is when the founder-CEO is not performing well and the targets aren’t met. But paradoxically, it may also be necessary to replace the founder-CEO if the company is doing exceptionally well. In that case, the CEO has been very successful in the stage the company used to be in, but with such dramatic growth, quick change is needed and that requires a different type of CEO. 

… the fact remains that the challenges a CTO faces change enormously throughout the life of a company.


This same reasoning can also be applied to CTOs in a digital product company. Whenever bugs pile up, the development team is in chaos or features are constantly almost ready, the CTO is probably not performing well. That is an obvious scenario, but what does the other scenario look like, one where the company is hugely successful? 

At first, you need someone who can get something built quickly. That first product should prove the concept, scale a bit to cater the first clients, largely ignoring concerns like stability, security, and scaling. Now imagine your product works: you get traction in the market, people notice you and clients arrive even faster than imagined. Your original CTO has been very successful, but at this point you need someone who can get your product stable, working at scale, and with the security needed in this day and age of ever more refined hacking methods. And you need this person fast. If that same person still ticks all the boxes, you are very lucky.

This example is, of course, a bit extreme, but the fact remains that the challenges a CTO faces change enormously throughout the life of a company. So which skills do you need at each point? And do you even need a full-time, in-house CTO?

From an idea to first growth

At the start, you need a developer, a hacker, someone who knows how to make something that proves your concept and who is skilled enough to make it work for the small user base you will hopefully build up soon. And preferably all of this on a small budget and quickly. This is not a CTO, this is a full-stack developer. They must have a broad skill set, but managing people or a department’s budget, or setting out a technical vision is not needed yet.

At the start, you need a developer, a hacker, someone who knows how to make something that proves your concept and who is skilled enough to make it work


If you’re very lucky, this person is you or your co-founder, but realistically you will have a hard time finding someone who is a good hacker and is willing to work for free, which we all know is what co-founding comes down to. Finding someone that is all this and is ready for the next stage, if and when it comes, is several orders of magnitude harder again. So whatever your situation, calling your most talented developer a CTO may very well backfire as soon as your company grows.

All that is not to say that there’s no need for strategic thinking. How do you solve this? A good option is to start off with advisors to fill this gap. You could hire an external CTO or find an investor with the right experience, but ideally, you find advisors that have had their own successful start-up that has grown beyond where you’re at now. 

Exponential growth

Fast forward some time. You’ve built your MVP. Congratulations, this is not a small task. You’ve added features to your product and people to your team to keep things going. Suddenly there’s success; people are talking about your product and even signing up. You need to scale the product, the infrastructure and the team, all at the same time as dealing with the non-technical challenges this brings.

Now your company needs its first full-time CTO. You need someone with a vision on how to do things and the skills to make it happen. A CTO at this point still needs to mainly look inward and know how to code, know the structure of the application and infrastructure, but the focus is shifting towards managing a team, establishing a culture and processes to be able to grow quickly. Growing also means hiring but also making sure that every hire is an effective team member as soon as possible.

A CTO at this point still needs to mainly look inward and know how to code, … but the focus is shifting towards managing a team


With growth come scaling issues. This means your code, however young it may be, will become legacy code, unfit for its current task. A CTO at this point should know how to manage this and know what relevant technology can be used to improve the code base. Managing changes in so many areas is not an easy thing to do.

At this point, you will typically be looking for an extra round of capital. Potential investors will be looking at the team. Your CTO is one of the key people they will evaluate when deciding to invest or not.

What are your options? If you have a CTO already, get advisors, mentors or training. You could even temporarily hire an external CTO ad interim to oversee the rapid changes while training your CTO. Don’t take it lightly; don’t assume anyone can just handle this situation.

To multiple teams

You’ve managed to grow quickly and not end up in the graveyard. Your product is maturing and has multiple parts, available on multiple platforms. For each of those, there’s a dedicated, multidisciplinary team, with a great number of different function titles that used to be just tasks. Product owners, product managers, engineering managers, technical support, operations, user research, user experience design, and more. This is no longer the tight-knit band of developers working to take over the world. People come and go, hiring is a constant process, people management takes a lot of time now. Scaling issues on a regional scale, security, legislation, a company vision, all of these become important whenever a technical or product decision needs to be made and after a few rounds of investment, the CTO now has clear budget and performance goals to meet, set by a board of directors they regularly meet. 

Your ideal CTO now is a visionary, understanding the technical side and the product, specifically within the sector of the company.


This is clearly not the same set of skills as before. A lot more weight is given to people management, process and structure, but still, the technical side of things can not be left to the teams alone. Again a giant leap is needed. If this change comes along slowly, your CTO has the time to adapt, learn new skills, but slow growth is usually seen as bad by investors. 

Your ideal CTO now is a visionary, understanding the technical side and the product, specifically within the sector of the company. But they are also communicators, with a well developed professional network and the ability to manage upwards, the expectations of the board, and downwards as a manager of managers. 

At this point, it is important to not lose touch with the developers, designers, tech support staff, and other technical teams. You’re not a multinational corporation (and even there it helps to keep in touch, but that’s a different subject). Things still move rapidly and changes can be made quickly.

Evolution

The examples above are only that, examples. There are as many journeys as there are companies. What I do hope is that these examples illustrate how a CTO’s skills need to adapt over a short time. Look at the difference between the hacker leading a small group in the beginning and the almost-corporate CTO managing multiple teams — this transformation can happen in just a few very busy years.

So before hiring your first CTO, consider what role this person will fill. What skills do they need and for how long? Will they be able to help you in the next phase too? The required skill set rapidly changes in a quickly changing company. Success or failure, you may need a different CTO.