Transcript: Ask the UXperts: Planning and Creating Usable Content — with Melanie Seibert

Yesterday I had the pleasure of hosting Content Strategist and UX Mastery community member Melanie Seibert in our Slack channel.

Melanie shared her wisdom around planning and creating usable content – content that enhances and supports our designs.

If you didn’t make the session today because you didn’t know about it, make sure you join our community to get updates of upcoming sessions.

If you’re interested in seeing what we discussed, or you want to revisit your own questions, here is a full transcript of the chat.

Transcript

hawk

2017-07-25 22:01

Firstly, a huge thanks to @melanie for her time today. I’m really interested in hearing what she has to say.

hawk

2017-07-25 22:01

For those of you that are new to these sessions, I’ll give you a brief rundown of the process

hawk

2017-07-25 22:02

I’ll intro Melanie and she’ll give us an introduction to the topic

hawk

2017-07-25 22:02

Then I’ll throw it open to you guys for your questions

hawk

2017-07-25 22:02

If things get busy I’ll queue questions in another channel for Melanie, an acknowledge that I have like this

hawk

2017-07-25 22:02

Then she’ll answer as she gets to your place in the queue

hawk

2017-07-25 22:02

So don’t hold back – post your questions any time

hawk

2017-07-25 22:03

I’ll put a full transcript up on http://uxmastery.com tomorrow

hawk

2017-07-25 22:03

So… here’s the formal intro

hawk

2017-07-25 22:03

In her role as Senior Content Strategist at mobile agency WillowTree, Melanie Seibert draws on over 17 years of experience planning and delivering content for interfaces. She has worked for companies that include Razorfish, Rackspace, and Crutchfield, and has taught an introduction to content strategy class at General Assembly.

hawk

2017-07-25 22:03

Today, Melanie supports the WillowTree design team by incorporating content strategy and content design principles into the UX process, helping the team deliver high-quality apps, chatbots, websites, and other digital products to clients.
Follow Melanie on Twitter @melanie_seibert, and check out her course Getting Started with Content Strategy. http://ift.tt/2tuYM2n

hawk

2017-07-25 22:04

@melanie Over to you to give us a rundown on content strategy and how it applies to us

melanie

2017-07-25 22:04

OK!

melanie

2017-07-25 22:04

Hi everyone! Happy to be here.Thanks for joining! :wave:

melanie

2017-07-25 22:04

I love UX Mastery and have been following these chats for a while.

melanie

2017-07-25 22:04

:smile:

melanie

2017-07-25 22:04

My name’s Melanie, as Hawk said. And I’m joining you from Virginia, USA. It’s about 6 pm here. :slightly_smiling_face:

melanie

2017-07-25 22:04

Content Strategy is a subdiscipline of UX that focuses on planning, creating, delivering, and maintaining, content that’s usable.

melanie

2017-07-25 22:04

We can also add that it includes delivering content to users on any device.

melanie

2017-07-25 22:04

There’s a lot packed into that definition though. :slightly_smiling_face:

melanie

2017-07-25 22:05

Content Strategy got really popular around 10 years ago (although it’s been going on longer) when Kristina Halvorson published the book Content Strategy for the Web.

melanie

2017-07-25 22:05

(I’ll link it here for those who want to read more: http://ift.tt/2uCXBA5)

melanie

2017-07-25 22:05

Since then, it’s gained a lot of popularity because a lot of teams were trying to pack content and copywriting into their design process at the end.

melanie

2017-07-25 22:05

And the content would break their designs.

melanie

2017-07-25 22:05

I know my interest in Content Strategy was piqued after a painful content migration. :slightly_smiling_face:

melanie

2017-07-25 22:06

Content Strategy seeks to prevent and fix those kinds of hard problems by planning for content throughout the UX process.

melanie

2017-07-25 22:06

It gives you tools for that, and also for knowing what content to create vs. not create.

melanie

2017-07-25 22:06

So it’s a pretty integral part of UX design. And I love it! :slightly_smiling_face:

melanie

2017-07-25 22:06

So that’s it for the intro! Would love to take any questions you may have.

hawk

2017-07-25 22:07

Questions are GO.

flaxenink

2017-07-25 22:07

@melanie: as a non content person is there a tool that designers can improve to put in fake copy per day?

melanie

2017-07-25 22:07

@flaxenink Do you mean like “lorem ipsum” copy?

jwager

2017-07-25 22:08

I’m interested in how to best support or encourage (or educate?) other team members in content creation from their realms of expertise.

flaxenink

2017-07-25 22:08

@melanie: yes but not using that anymore.

melanie

2017-07-25 22:08

There are some lorem ipsum generators online, although it’s a bit of a hot topic. :slightly_smiling_face: Oh okay!

melanie

2017-07-25 22:08

So the best advice I can give is to look at what existing content the organization has. If you’re mocking up, say, a blog page, what blog posts have they published in the past?

flaxenink

2017-07-25 22:08

@melanie: able to show decent content to stake holders

melanie

2017-07-25 22:09

Beyond that, I think it’s beneficial to work with a writer who can help you create spec copy. I don’t know of any tool so far that I would recommend.

melanie

2017-07-25 22:09

Maybe with the rise of AI tools, we’ll see one soon!

melanie

2017-07-25 22:09

@jwager asked: I’m interested in how to best support or encourage (or educate?) other team members in content creation from their realms of expertise

flaxenink

2017-07-25 22:09

@melanie: thanks!!!

melanie

2017-07-25 22:09

@jwager that’s a tough one!

melanie

2017-07-25 22:10

I like to encourage people to write BAD FIRST DRAFTS

melanie

2017-07-25 22:10

This advice comes from novelist Anne Lamott.

melanie

2017-07-25 22:10

I had a developer friend who was very hesitant to write, bc he lacked confidence.

melanie

2017-07-25 22:10

When I told him he should just write terrible first drafts, he seemed to really open up.

jwager

2017-07-25 22:10

I work in a technical space and can’t (nor would want) to create all that content myself that would be beneficial to publish!

melanie

2017-07-25 22:10

It helped him to stop editing himself.

melanie

2017-07-25 22:11

Right!

melanie

2017-07-25 22:11

Do you edit the experts’ writing?

jwager

2017-07-25 22:12

There isn’t much writing happening at present. It’s something I know is important and want to figure out

melanie

2017-07-25 22:12

I also like to let people write in whatever medium they’re comfortable in. Google Docs, Pages, Word, etc.

melanie

2017-07-25 22:12

Oh I see

melanie

2017-07-25 22:12

If you can get a high-level stakeholder (manager, exec) on board to explain the benefit to the business, that can help too

melanie

2017-07-25 22:12

I held an interest meeting once for contributors, and it seemed to drum up a lot of interest (redundant, ha).

melanie

2017-07-25 22:13

So: 1. Interest meeting, 2. Executive sponsorship, 3. BAD first drafts!!

melanie

2017-07-25 22:13

TERRIBLE DRAFTS

melanie

2017-07-25 22:13

(As long as someone will edit them. lol)

jwager

2017-07-25 22:14

Cool, I like the collaborative approach

melanie

2017-07-25 22:14

Yes, it works well for us here at WillowTree. We have a crazy amount of technical contributors (http://ift.tt/2uDfgI0)

jwager

2017-07-25 22:15

The book you recommended, is it a good tool for how to create an overall content plan? A model?

janeg

2017-07-25 22:15

What are the most critical issues in content strategy? Today content strategy covers so much. If you had to focus on three critical areas, what would they be?

melanie

2017-07-25 22:15

@jwager: It depends on what you mean by a plan/model (different people mean different things :)). Are you thinking of an editorial calendar?

melanie

2017-07-25 22:16

To plan a schedule of publishing content, for example on a blog

jwager

2017-07-25 22:16

A calendar would be important. I’m thinking of the birds eye view on what we want the content to support. As in, toward our business goals.

melanie

2017-07-25 22:16

Yes!

melanie

2017-07-25 22:17

It’s geared toward a holistic understanding of ALL the organization’s content.

melanie

2017-07-25 22:17

@janeg asked: “What are the most critical issues in content strategy? Today content strategy covers so much. If you had to focus on three critical areas, what would they be?”

jwager

2017-07-25 22:17

Sweet, that’s what I want to learn more about

melanie

2017-07-25 22:17

Wow, love this question

melanie

2017-07-25 22:17

awesome! I think it’ll help! Let me know…

melanie

2017-07-25 22:18

So @janeg one thing that’s really a big topic right now is “content design”

melanie

2017-07-25 22:18

And by that, we mean the “content” part of content strategy: how does the content support the interaction?

melanie

2017-07-25 22:18

It’s not necessarily a NEW idea, but it’s still very much needed. Some companies are still not giving a lot of thought or resources to content.

janeg

2017-07-25 22:18

Thanks! Can you provide an example?

melanie

2017-07-25 22:19

Sure. (Incidentally, Sarah Richards of http://uk.gov writes about this, she’s definitely worth a follow on Twitter!)

melanie

2017-07-25 22:19

So it might be collaborating with a designer to break up a page into sections, using headers so that users can scan for information they need, adding bullets to make the content scannable.

melanie

2017-07-25 22:20

It could be deciding that a dropdown of zip codes is unusable, and the field should be formatted as a text entry field (Sarah uses this example)

janeg

2017-07-25 22:20

Ah, thanks. So collaborating with a UX designer

melanie

2017-07-25 22:20

So right. It’s a little beyond writing, as in the second example.

melanie

2017-07-25 22:20

More, thinking about how content should support whatever the user wants to do

melanie

2017-07-25 22:20

The second issue I’d bring up is reuse: devices are proliferating. Watches, smart fridges, apps, etc. How can we publish to multiple devices?

melanie

2017-07-25 22:20

This is a huge problem.

melanie

2017-07-25 22:21

Fortunately, we’re seeing a lot of new content management system (CMS) technologies to support this.

melanie

2017-07-25 22:21

However, organizations are lagging behind.

melanie

2017-07-25 22:21

Some still have a CMS (and a copy of the content) for each app / website / device.

melanie

2017-07-25 22:21

Which is a huge pain to manage!

melanie

2017-07-25 22:21

Third issue, hmmm.

melanie

2017-07-25 22:22

I would say, with the popularity of content marketing, a little too much emphasis is probably placed on production of MORE content.

melanie

2017-07-25 22:22

without thinking about: who will write it? does it serve the user’s needs?

laura_r

2017-07-25 22:22

YES THIS MY GOODNESS!

melanie

2017-07-25 22:22

So I think we need a little more UX focus on our marketing content :wink:

melanie

2017-07-25 22:22

(I would say this as i’m in UX…)

melanie

2017-07-25 22:23

So:
1. Content design
2. Content reuse
3. A little more strategic focus on marketing content

janeg

2017-07-25 22:23

Thanks so much! This is really helpful

melanie

2017-07-25 22:23

Oh good!!

flaxenink

2017-07-25 22:24

@melanie I work with all content designers and they are so busy so that was I asking about the copy how or what I could use…

flaxenink

2017-07-25 22:24

Any tips

melanie

2017-07-25 22:25

Right @flaxenink – so you were looking for a tool to allow you to easily import fake content into your designs?

melanie

2017-07-25 22:25

Can you give me an example of the type of thing you’re designing? Like, ecommerce website, mobile app, etc

flaxenink

2017-07-25 22:25

@melanie: HA both!

melanie

2017-07-25 22:26

haha

melanie

2017-07-25 22:26

I just remembered this tool. If you use InVision, apparently there is a Craft plugin that brings real data into your design. I’ve never used it, but might be worth a look! http://ift.tt/2uYSJYR

melanie

2017-07-25 22:27

I don’t know of anything else right off!

hawk

2017-07-25 22:27

I have a q: What traits make a good Content Strategist?

melanie

2017-07-25 22:28

Ah

melanie

2017-07-25 22:28

1. Adaptable! You have to be willing to fill in some gaps.

melanie

2017-07-25 22:28

Content Strategists might have to help out with IA, taxonomy, project management.

melanie

2017-07-25 22:28

So they need to be willing to fill in where needed.

melanie

2017-07-25 22:28

2. Humble! Sometimes you have to work with experts to get information.

melanie

2017-07-25 22:28

You can’t be afraid to “look stupid.” Ask the “dumb” questions.

melanie

2017-07-25 22:29

Chances are, others are asking those same questions in their minds and are too afraid to speak up. :slightly_smiling_face:

melanie

2017-07-25 22:29

3. Curious! Especially in a tech environment.

melanie

2017-07-25 22:29

It really helps to be able to dig into technical details about a tool or technology.

melanie

2017-07-25 22:29

Especially since they’re always changing (see the discussion of content management systems above.)

crystal

2017-07-25 22:30

This past May was the first I heard about UX Writing and UX Writer as a job title. I haven’t understood where this fits in with Content Strategy. Is UX Writing it’s own independent field or a subset of content strategy? Is it just another fuzzy term for the same thing?

tzhao

2017-07-25 22:30

@melanie, I could not agree with you more, especially the #2. Without it, it will impose a challenge.

melanie

2017-07-25 22:30

@crystal You are very observant!

melanie

2017-07-25 22:30

UX writing is, I would say, a subset of Content Strategy.

melanie

2017-07-25 22:30

Content Strategy has 2 components: content tasks, and people tasks

melanie

2017-07-25 22:31

The “content” tasks are where you would put UX writing.

melanie

2017-07-25 22:31

So yes! UX writing is a part of it. And I would even say that “UX writing” and “content design” are synonyms for the same thing.

melanie

2017-07-25 22:31

Oh I guess I should mention the “people” tasks…

melanie

2017-07-25 22:32

Above, I said that often organizations want to publish MORE CONTENT without thinking about who and how

melanie

2017-07-25 22:32

So a Content Strategist can help them to map out workflows, so they know what their content approval process will be

melanie

2017-07-25 22:32

Or list all their channels (social media, websites, apps, etc) so they know what content they have…

melanie

2017-07-25 22:32

It’s amazing how many companies don’t even know what they’re publishing :slightly_smiling_face:

melanie

2017-07-25 22:33

But that’s a bit of a tangent :slightly_smiling_face:

melanie

2017-07-25 22:33

I like this image by Kristina Halvorson that describes what Content Strategy entails: http://ift.tt/2uDqKeR

crystal

2017-07-25 22:33

I see. That helps! Thanks!

melanie

2017-07-25 22:33

Sure!

melanie

2017-07-25 22:33

(UX writing would go on the left side of that diagram IMO)

hawk

2017-07-25 22:34

Who else has questions? Now is a good time. We’re at the end of the queue.

hawk

2017-07-25 22:34

Tough crowd! Ok, I’ll jump in with another one. :wink:

hawk

2017-07-25 22:34

The title of this session is planning and creating USABLE content

hawk

2017-07-25 22:35

what makes content usable?

melanie

2017-07-25 22:35

Good one!

melanie

2017-07-25 22:35

I define usable content as having 3 traits:

melanie

2017-07-25 22:35

(I’m doing a lot of lists of 3s… it’s not intentional! haha)

melanie

2017-07-25 22:35

1. It’s findable. Especially on the web, people must be able to find it in search engines.

melanie

2017-07-25 22:36

That means removing the content clutter from our websites.

melanie

2017-07-25 22:36

It can really mess up users’ search results.

melanie

2017-07-25 22:36

It also means using relevant terms that the user will understand. Not necessarily just how the business talks.

melanie

2017-07-25 22:36

2. It’s actionable.

melanie

2017-07-25 22:36

Digital content is a little different from print, because users spend so much time inhabiting a digital ecosystem, of which content is a huge component.

melanie

2017-07-25 22:37

That’s why it’s so important for digital content to be actionable—there is usually an online action for the user to take.

melanie

2017-07-25 22:37

In contrast, print content (think about instructional sheets or user manuals) usually doesn’t have a direct action for the user to take inside the content’s ecosystem (unlike digital).

melanie

2017-07-25 22:37

3. It’s understandable.

melanie

2017-07-25 22:37

This is where good writing comes in. Whether you call it “content design” or “UX writing.” :slightly_smiling_face:

melanie

2017-07-25 22:37

To me, those 3 things make content usable.

hawk

2017-07-25 22:38

Cool, thanks.

ct

2017-07-25 22:38

q: I’ve often seen how content can end up as as secondary discussion when it comes to product dev. Can you share your content strategy workflow experience when it comes to working with big teams? Specifically where/when content strategy planning discussions occur in agile environments that often have established communication flows between dev and design teams and not necessarily with the editorial or content teams.

laura_r

2017-07-25 22:39

I work with academics and researchers and go around and around on what “understandable” is. There’s a bunch of info out there on that topic (yay – I’m not alone), but am curious how you handle those types of divides.

melanie

2017-07-25 22:39

ct: Yes, this is a common problem I think.

melanie

2017-07-25 22:39

@ct Ideally, the conversations with editorial teams should happen at the beginning of the project, and throughout the project.

melanie

2017-07-25 22:40

Often I have received a request to edit an error message or button text at the end of the project, and I always ask a million questions. :smile:

ct

2017-07-25 22:40

totally!

melanie

2017-07-25 22:40

It’s important for the writer/content strategist to know about the user and product to be able to write efficiently

lynne

2017-07-25 22:40

If there are several very different audiences accessing the content, how do you ensure it is usable for everyone?

melanie

2017-07-25 22:41

So the best projects I’ve worked on were ones where the editorial team was in the daily standup with dev and design. And content came before design (or at least was being created concurrent with design).

melanie

2017-07-25 22:41

I don’t know if we did “agile” differently from you :smile: I’m not sure if that’s what you meant.

ct

2017-07-25 22:41

@melanie that’s a whole other discussion :slightly_smiling_face: Thank you, that was helpful

melanie

2017-07-25 22:42

@laura_r asked: “I work with academics and researchers and go around and around on what “understandable” is. There’s a bunch of info out there on that topic (yay – I’m not alone), but am curious how you handle those types of divides. (edited)”

melanie

2017-07-25 22:42

Gosh that’s hard.

melanie

2017-07-25 22:42

I mean, the best thing is to do user testing, of course.

melanie

2017-07-25 22:42

It’s really helpful if you can watch a user struggle to understand something! It really bolsters your argument.

laura_r

2017-07-25 22:42

Then they start asking about p values! :smile:

melanie

2017-07-25 22:42

oh dear lol

laura_r

2017-07-25 22:43

ooooooh – i like the idea of them seeing it in real time.

melanie

2017-07-25 22:43

Have you tried showing them Jared Spool’s or NNG’s information about how you only need 5 users? (that’s right, i think? lol)

melanie

2017-07-25 22:43

I seem to remember it being 5ish

melanie

2017-07-25 22:43

Yeah, qualitative, moderated testing helps with that.

laura_r

2017-07-25 22:43

5 ish is what I remember as well

melanie

2017-07-25 22:43

I don’t think it’s a question of “are ALL of our users struggling with this term?”

melanie

2017-07-25 22:44

If you can make it better for 2% of your users, why not?

laura_r

2017-07-25 22:44

totally

melanie

2017-07-25 22:44

Maybe you can try that argument. :wink:

melanie

2017-07-25 22:44

Especially if that doesn’t degrade the experience for the more savvy users.

melanie

2017-07-25 22:44

If it does, then you have to navigate the tradeoff, which is pretty tough.

melanie

2017-07-25 22:44

But we really seem to overestimate the level of expertise of our users/readers!

melanie

2017-07-25 22:45

Most expert users don’t mind if the copy is a bit simple. Or having to click through to get to more detail.

laura_r

2017-07-25 22:45

I agree

melanie

2017-07-25 22:45

But inexpert users will really be stumped by something that’s too jargony.

melanie

2017-07-25 22:45

I know I’m preaching to the choir :smile:

melanie

2017-07-25 22:45

@lynne asks: “If there are several very different audiences accessing the content, how do you ensure it is usable for everyone?”

melanie

2017-07-25 22:46

Hmm. I think when you say “everyone” you mean “all the disparate audiences” right?

melanie

2017-07-25 22:46

Not like, everyone :smile:

lynne

2017-07-25 22:46

Yes!

wendy

2017-07-25 22:46

@melanie how can people become content strategists? Is there a catch 22 similar to what people trying to break into ux Design experience?

melanie

2017-07-25 22:47

So, I’ve worked in situations where we had different paths for different users to take.

melanie

2017-07-25 22:47

It can be as obvious as segmenting by “doctors,” “patients,” etc on a health care website. (That’s common.)

melanie

2017-07-25 22:47

Or it can be asking what problem the user is trying to solve

melanie

2017-07-25 22:48

When I worked at Rackspace, we had this issue. Some users were very technical, some were just mom and pops who needed to host a site for their business.

melanie

2017-07-25 22:48

We ended up surfacing a couple different paths on the homepage. An option for large enterprises looking for cloud computing, and an option for small businesses looking for simple hosting (for example).

melanie

2017-07-25 22:49

Now how you word that will be different depending on your business. I recommend using terms the user would use when they think, “I have this problem to solve.”

melanie

2017-07-25 22:49

Like, “I want to host an ecommerce website.”

melanie

2017-07-25 22:49

Rather than whatever jargon the business uses. Does that help?

melanie

2017-07-25 22:50

@wendy asks: “how can people become content strategists? Is there a catch 22 similar to what people trying to break into ux Design experience?”

melanie

2017-07-25 22:50

Hm, interesting. I don’t think it’s quite as bad, to be honest.

melanie

2017-07-25 22:51

Because existing content strategists all come from various fields. I know one content strategist who was a developer. Most were writers or editiors. So there’s more understanding that “no one starts their career as a Content Strategist” (at least not yet). :slightly_smiling_face:

melanie

2017-07-25 22:51

So I will recommend a few things.

melanie

2017-07-25 22:51

First, read books. The Halvorson book (Content Strategy for the Web) is indispensable for anyone wanting to do Content Strategy within UX (rather than marketing).

melanie

2017-07-25 22:52

Second, there is a conference called Confab that is excellent. If you can go, I recommend. (If you can’t pay, see if you can volunteer and attend for free!)

melanie

2017-07-25 22:52

Anther thing is, I have a free 7-day email course called Become a Content Strategist

lynne

2017-07-25 22:52

Thanks. It’s interesting because I’d learnt that segmenting by audience was generally a bad idea, but I can definitely see how it would help in this kind of situation.

melanie

2017-07-25 22:52

It gives you some tips for starting to practice Content Strategy right away.

melanie

2017-07-25 22:52

You can sign up at my website: http://prosekiln.com

melanie

2017-07-25 22:53

TBH I’ve heard that too. I just don’t have any other great solutions.

melanie

2017-07-25 22:53

We wrestled with it quite a bit. lol

wendy

2017-07-25 22:53

Great, thanks so much for the tips, @melanie

melanie

2017-07-25 22:53

Sure!

laura_r

2017-07-25 22:54

i never thought to try and volunteer at ConFab – great idea!

melanie

2017-07-25 22:54

The Content Strategy community is very welcoming. Honestly I would jump on Twitter and follow a bunch of folks, like Rachel Lovinger, Halvorson, Jeff Eaton, Kate Kiefer Lee, Hilary Marsh, Colleen Jones. That should get you started!

melanie

2017-07-25 22:54

Sadly I can’t take credit. That idea comes from my friend Hilary Marsh. :slightly_smiling_face:

melanie

2017-07-25 22:55

And they love to talk about it, so you can ask questions.

laura_r

2017-07-25 22:55

Well thank you both!

melanie

2017-07-25 22:55

There is also a UX + Content Slack that’s run by Michael Metts – Google will lead you to a form to fill out.

melanie

2017-07-25 22:55

Oh! and the Content Strategists group on Facebook!

melanie

2017-07-25 22:55

You’re welcome! :smile:

melanie

2017-07-25 22:56

http://ift.tt/1bmOBAP

melanie

2017-07-25 22:56

Lots of opportunities to read, engage, and ask questions. :smile:

hawk

2017-07-25 22:57

Awesome. We have about 3 mins left. Does anyone have any urgent qs that haven’t been answered?

hawk

2017-07-25 22:57

Nope? Ok, we might call this a wrap!

hawk

2017-07-25 22:57

Again, thanks so much @melanie for your time.

melanie

2017-07-25 22:57

Wow that went by fast! Thanks for having me. :smile:

melanie

2017-07-25 22:58

anyone with further questions is welcome to find me on here. I’m on Slack constantly.

melanie

2017-07-25 22:58

:wink:

hawk

2017-07-25 22:58

And to everyone else, if you want to learn more, here’s that link to Melanie’s course again: http://ift.tt/2tuYM2n

hawk

2017-07-25 22:58

Thanks to everyone else for joining us today. :slightly_smiling_face:

The post Transcript: Ask the UXperts: Planning and Creating Usable Content — with Melanie Seibert appeared first on UX Mastery.

by Sarah Hawk via UX Mastery

Creating Beautiful Charts Using Vue.js Wrappers for Chart.js

Charts are an important part of modern websites and applications. They help to present information that cannot be simply represented in text. Charts also help to make sense of data that would ordinarily not make sense in a textual format by presenting them in a view that's easy to read and understand.

In this article I will show you how to represent data in the form of various types of chart with the help of Chart.js and Vue.js.
Chart.js is a simple yet flexible JavaScript charting library for developers and designers that allows drawing of different kinds of chart by using the HTML5 canvas element. A good refresher on Chart.js can be read here.

Vue.js is a progressive JavaScript framework, which we'll use alongside Chart.js to demonstrate the chart examples. There's an awesome primer on using Vue.js on Sitepoint and that can be read here. We'll also be using vue-cli to scaffold a Vue.js project for the demo we are going to build. vue-cli is a simple CLI for scaffolding Vue.js projects. It offers various templates from which an app can be built, but we will be using the webpack template to bootstrap our app.

Charts, Charts, Charts

There are different types of JavaScript charting libraries and various chart wrappers built on Vue.js, but as we are focused on Chart.js in this article, we will be looking at Vue wrappers for Chart.js.

There is an awesome collection of Vue wrappers for charts on the awesome-vue repo on GitHub but we are only interested in the following Chart.js wrappers:

• vue-charts
• vue-chartjs
• vue-chartkick

We will be using the various wrappers to demonstrate how to create different types of chart and also touch on the unique features that each of these wrappers possesses.

Scaffolding the Project with vue-cli

Let's get started by installing vue-cli with the following command:

npm install -g vue-cli

Once that's done, we can then get started with scaffolding a project by typing in:

vue init webpack my-project

We are specifying that we want a Vue.js app created for us with the webpack template and the name of the project as my-project. Respond to all of the questions and let vue-cli do the rest of the magic. Awesome!

Now let us go ahead to install the dependencies and Chart.js wrappers needed for our app:

npm install chart.js chartkick hchs-vue-charts vue-chartjs vue-chartkick

Tip: If you use npm 5, no need for the --save flag anymore as all packages are automatically saved now. Read more about that here.

This will install all the dependencies and Chart.js Vue wrappers needed. Let's test what we have so far and run our application and see if the app was successfully created. According to the vue-cli docs, running npm run dev will create a first-in-class development experience in which we can interact and engage with our app. So let's do that.

npm run dev

You can visit localhost:8080 in your browser to see the welcome page.

Adding Routes

Next thing we want to do is create the different routes in which we can view the charts for each of the wrappers above. At the end, we would like to have a /charts route to display charts made with the vue-charts wrapper, /chartjs to display charts made with the vue-chartjs wrapper, and lastly /chartkick to display charts made with the vue-chartkick wrapper.

Navigate to the router folder of the app and open up theindex.js file. Let's replace the content of that file with this:

import Vue from 'vue' // Import Vue from node_modules
import Router from 'vue-router' // Import Vue Router from node_modules
import Home from '@/components/Home' //The Home component that's in charge of everything we see on the app's homepage
import VueChartJS from '@/components/VueChartJS' //The VueChartJS component that displays the vue-chartjs charts.
import VueChartKick from '@/components/VueChartKick' //The VueChartJS component that displays the vue-chartkick charts.
import VueCharts from '@/components/VueCharts' //The VueChartJS component that displays the vue-charts charts.

//Specify that we want to use Vue Router
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/chartjs',
      name: 'VueChartJS',
      component: VueChartJS
    },
    {
      path: '/chartkick',
      name: 'VueChartKick',
      component: VueChartKick
    },
    {
      path: '/charts',
      name: 'VueCharts',
      component: VueCharts
    }
  ]
})

Before we discuss the code above, make sure to create the files below in the src/components/ folder. This is done so that the routes defined above have their own component.

• VueChartJS.vue
• VueChartKick.vue
• VueCharts.vue

So what's happening in the code block above?

We imported some files which are the Vue components that we created above. Components are one of the most powerful features of Vue. They help us extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to.

Lastly, we defined the routes and components which will serve the different pages we need to display the different charts.

Home Component

As mentioned above, the Home component serves as the default (/) route and we will need to create it. We can do that, or simply rename the existing Hello.vue file to Home.vue and replace the content with the code block below.

<template>
  <section class="hero is-success is-fullheight">
    <div class="hero-body">
      <div class="container">
        <h1>Creating Beautiful Charts Using Vue.js Wrappers For Chart.js</h1>
        <ul>
          <li><router-link to="/chartjs">vue-chartjs</router-link></li>
          <li><router-link to="/charts">vue-charts</router-link></li>
          <li><router-link to="/chartkick">vue-chartkick</router-link></li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'home'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
    text-decoration: underline;
  }
</style>

Adding Bulma

One more thing before we start adding charts. Let's add the Bulma CSS framework to the app. This should make things easier when it comes to CSS.

Open the index.html in the root of the app directory and add the following inside the head tag:

<link href="http://ift.tt/2uxIolw" rel="stylesheet">

We can now move on to creating charts!

Making Charts with vue-chartjs

vue-chartjs is a Chart.js wrapper that allows us to easily create reuseable chart components. Reusability means we can import the base chart class and extend it to create custom components.

With that being said, we will be demonstrating 4 types of charts that can be built using vue-chartjs: A Line Chart, Bar Chart, Bubble Chart, and a Bar Chart that demonstrates Reactivity (the chart updates whenever there's a change in the dataset).

So before we go ahead, make sure these files are created inside the src/components/ folder.

• LineChart.vue
• BarChart.vue
• BubbleChart.vue
• Reactive.vue

Line Chart

To create a Line chart, we will create a component to render this type of chart only. Open the LineChart.vue component file inside the src/components folder and type in the following code:

<script>
  //Importing Line class from the vue-chartjs wrapper
  import {Line} from 'vue-chartjs'
  //Exporting this so it can be used in other components
  export default Line.extend({ 
    data () {
      return {
        datacollection: {
        //Data to be represented on x-axis
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              pointBackgroundColor: 'white',
              borderWidth: 1,
              pointBorderColor: '#249EBF',
              //Data to be represented on y-axis
              data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100]
            }
          ]
        },
        //Chart.js options that controls the appearance of the chart
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: true
              }
            }],
            xAxes: [ {
              gridLines: {
                display: false
              }
            }]
          },
          legend: {
            display: true
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    },
    mounted () {
    //renderChart function renders the chart with the datacollection and options object.
      this.renderChart(this.datacollection, this.options)
    }
  })
</script>

Let's discuss what the code above is doing. The first thing we did was import the chart class we needed (in this case, Line) from the vue-chartjs and exported it.

The data property contains a datacollection object which contains all the information we'll need to build the Line chart. This includes the Chart.js configuration, like labels, which will be represented on the x-axis, the datasets, which will be represented on the y-axis, and the options object, which controls the appearance of the chart.

The mounted function calls renderChart() which renders the chart with the datacollection and options objects passed in as parameters.

Now, let's open the VueChartJS.vue file and type in the following code:

Continue reading %Creating Beautiful Charts Using Vue.js Wrappers for Chart.js%

by Yomi Eluwande via SitePoint

How to Pick Stock Photos that Captivate Users

This article was sponsored by GraphicStock. Thank you for supporting the partners who make SitePoint possible.

Photography in design — be that web, mobile or otherwise — is pretty common. Sourcing stock images is almost second nature to most designers, so it's easy to incorporate imagery into web and app designs without really thinking about why we're doing it.

In this article, we'll discuss some example scenarios where stock photography can be extremely effective in web design and app design, why it's effective, and how to choose stock images that not only look astonishing, but actually help to achieve the design's goals (sales, signups, conversions and so on).

When to Use Stock Photography (and Why)

By using images in your web and app designs, you're taking a risk. You're sacrificing faster loading times, which directly results in fewer conversions, because of both impatient users and SEO, and you're also sacrificing screen real estate that could be otherwise utilized for something more important.

As a designer, it's vital that you don't have a default setting (this is how designs all end up the same). Instead, think about the design goals and how imagery could play into that.

As a rule, stock photography works best when trying to persuade. Persuasive writing is totally a thing, and many copywriters are pretty damn awesome at it, but photography does something that words can't — photography taps into the user's emotions. When we're able to tap into the user's emotions, persuading the user to buy, signup or convert is easier.

Tip: for best results, use words and images in harmony.

You also need a great source of stock photography. It's too easy to spend a substantial amount of money on a marketplace that is inundated with the kind of clichéd stock photos that we learned to filter out years ago.

Fortunately, GraphicStock offers a huge curated library of images that look great. Start your free 7-Day GraphicStock trial and download up to 20 images per day. After that, you can subscribe for $99 for the first year, with the subscription renewing at $149 every year.

Tapping Into Your Users' Fears and Desires

Let's take a look at three examples where stock photography actively and directly improves conversions, and why.

1. Beach Getaway

Right off the bat, you'd think "beach". A beach is fine, but a person enjoying themselves on the beach is even better, because it resonates with the users' desires of relaxation, where they can easily imagine themselves as the person in the image. What would be even better is if the subject matter was something other than what the user would expect (which would be where the ocean is a shade of blue that only Photoshop could accomplish).

2. Artist Experience

Imagine a class or "experience day" where you pay to learn how to be an artist. Paints, easels — those are the ideas that come to mind first, although they're also the most obvious ideas. A better, more exciting approach once again appeals to the user emotionally, by using a human subject covered in paint.

It's fun, it's bold, it's relatable, and it plays with the users' desires of escaping from their average day-to-day life.

3. Camera Product

Let's say that you're advertising a product (like a camera), and the user isn't sure they really want or need it. Products like iPhones and MacBook Pros use straight-up "perspective" shots because they look am-az-ing: everybody wants one, that's their thing, that's how they sell them, they sell themselves.

Continue reading %How to Pick Stock Photos that Captivate Users%

by Daniel Schwarz via SitePoint

Above the fold is a myth.

Awesome One Page idea by Rob Lafratta demonstrating and informing why "Above The Fold" is a saying from the past. Great use of an .fyi domain too

by Rob Hope via One Page Love