Tag Archives: smashing-book

Useful Tips To Get Started With WordPress Hooks


Even though hooks in WordPress are amazing and everyone uses them knowingly or unknowingly, I get the impression that some advanced users and especially front-end developers still seem to avoid them. If you feel like you’ve been holding back on hooks, too, then this article will get you started. I am also going to reveal some interesting details to anyone who thinks they are familiar enough with hooks.

Hooks in WordPress

You’ll want to read this article especially if you’d like to: understand code snippets with hooks such as those found in forums, extend WordPress, plugins and themes without breaking updates, learn how to avoid common problems, allow others to extend your code.

The post Useful Tips To Get Started With WordPress Hooks appeared first on Smashing Magazine.

Continue reading:  

Useful Tips To Get Started With WordPress Hooks

Generating SVG With React


React is one of today’s most popular ways to create a component-based UI. It helps to organize an application into small, human-digestible chunks. With its “re-render the whole world” approach, you can avoid any complex internal interactions between small components, while your application continues to be blazingly fast due to the DOM-diffing that React does under the hood (i.e. updating only the parts of the DOM that need to be updated).

Generating SVG With React

But can we apply the same techniques to web graphics — SVG in particular? Yes! I don’t know about you, but for me SVG code becomes messy pretty fast. Trying to grasp what’s wrong with a graph or visualization just by looking at SVG generator templates (or the SVG source itself) is often overwhelming, and attempts to maintain internal structure or separation of concerns are often complex and tedious.

The post Generating SVG With React appeared first on Smashing Magazine.

See original article – 

Generating SVG With React

It’s The Smashing Birthday Party, And You Are Invited (With Goodies!)


Exactly 9 years ago we published the very first article on this very website. Many things changed since then, but one thing remained the same: our obsession for publishing valuable, practical quality content. We proudly stand behind our work — the books, the eBooks, the conferences; our craft is ours, but our work serves the community and belongs to everybody.

The Thanks Page inside the book

As a team, we are happy and privileged to do what we truly love, and we know that this wouldn’t be possible without your kind and generous support. So thanks for sticking around. Now, a birthday calls for a birthday party, so we’ve prepared a little something for you to celebrate the day: a free chapter on responsive design patterns (PDF), a Mystery Riddle, a new free eBook and a birthday special: if you grab the hardcover of the Smashing Book 5 today, you’ll get five Smashing eBooks as a gift for your kind support.

The post It’s The Smashing Birthday Party, And You Are Invited (With Goodies!) appeared first on Smashing Magazine.

Read more – 

It’s The Smashing Birthday Party, And You Are Invited (With Goodies!)

Thumbnail

Designing For The Elderly: Ways Older People Use Digital Technology Differently

If you work in the tech industry, it’s easy to forget that older people exist. Most tech workers are really young1, so it’s easy to see why most technology is designed for young people. But consider this: By 2030, around 19% of people in the US will be over 652. Doesn’t sound like a lot? Well it happens to be about the same number of people in the US who own an iPhone today. Which of these two groups do you think Silicon Valley spends more time thinking about?

This seems unfortunate when you consider all of the things technology has to offer older people. A great example is Speaking Exchange3, an initiative that connects retirees in the US with kids who are learning English in Brazil. Check out the video below, but beware — it’s a tear-jerker.


CNA – Speaking Exchange (watch the video on YoutTube4)

While the ageing process is different for everyone, we all go through some fundamental changes. Not all of them are what you’d expect. For example, despite declining health, older people tend to be significantly happier5 and better at appreciating what they have6.

But ageing makes some things harder as well, and one of those things is using technology. If you’re designing technology for older people, below are seven key things you need to know.

(How old is old? It depends. While I’ve deliberately avoided trying to define such an amorphous group using chronological boundaries, it’s safe to assume that each of the following issues becomes increasingly significant after 65 years of age.)

Vision And Hearing

From the age of about 40, the lens of the eye begins to harden, causing a condition called “presbyopia.” This is a normal part of ageing that makes it increasingly difficult to read text that is small and close.

The font size a 75 chooses on his Kindle.7
Here’s a 75-year-old with his Kindle. Take a look at the font size he picks when he’s in control. Now compare it to the average font size on an iPhone. (Image: Navy Design28208.) (View large version9)

Color vision also declines with age, and we become worse at distinguishing between similar colors. In particular, shades of blue appear to be faded or desaturated.

Hearing also declines in predictable ways, and a large proportion of people over 65 have some form of hearing loss10. While audio is seldom fundamental to interaction with a product, there are obvious implications for certain types of content.

Key lessons:

  • Avoid font sizes smaller than 16 pixels (depending of course on device, viewing distance, line height etc.).
  • Let people adjust text size themselves.
  • Pay particular attention to contrast ratios11 with text.
  • Avoid blue for important interface elements.
  • Always test your product using screen readers12.
  • Provide subtitles when video or audio content is fundamental to the user experience.

Motor Control

Our motor skills decline with age, which makes it harder to use computers in various ways. For example, during some user testing at a retirement village, we saw an 80-year-old who always uses the mouse with two hands. Like many older people, she had a lot of trouble hitting interface targets and moving from one thing to the next.

In the general population, a mouse is more accurate13 than a finger. But in our user testing, we’ve seen older people perform better using touch interfaces. This is consistent with research that shows that finger tapping declines later14 than some other motor skills.

Key lessons:

  • Reduce the distance between interface elements that are likely to be used in sequence (such as form fields), but make sure they’re at least 2 millimeters apart.
  • Buttons on touch interfaces should be at least 9.6 millimeters diagonally15 (for example, 44 × 44 pixels on an iPad) for ages up to 70, and larger for older people.
  • Interface elements to be clicked with a mouse (such as forms and buttons) should be at least 11 millimeters diagonally.
  • Pay attention to sizing in human interface guidelines (Luke Wroblewski has a good roundup of guidelines16 for different platforms).

Device Use

If you want to predict the future, just look at what middle-class American teens are doing. Right now, they’re using their mobile phones for everything.

Dustin Curtis17

It’s safe to assume Dustin has never watched a 75-year-old use a mobile phone. Eventually, changes in vision and motor control make small screens impractical for everyone. Smartphones are a young person’s tool18, and not even the coolest teenager can escape their biological destiny.

In our research, older people consistently described phones as “annoying” and “fiddly.” Those who own them seldom use them, often not touching them for days at a time. They often ignore SMS’ entirely.

Examples of technology used by the elderly19
Examples of technology used by the elderly (Image: Navy Design28208) (View large version21)

But older people aren’t afraid to try new technology when they see a clear benefit. For example, older people are the largest users of tablets22. This makes sense when you consider the defining difference between a tablet and a phone: screen size. The recent slump in tablet sales23 also makes sense if you accept that older people have longer upgrade cycles than younger people.

Key lessons:

  • Avoid small-screen devices (i.e. phones).
  • Don’t rely on SMS to convey important information.

Relationships

Older people have different relationships than young people, at least partly because they’ve had more time to cultivate them. For example, we conducted some research into how older people interact with health care professionals. In many cases, they’ve seen the same doctors for decades, leading to a very high degree of trust.

I regard it like going to see old pals.… I feel I could tell my GP almost anything.

– George, 73, on visiting his medical team

But due to health and mobility issues, the world available to the elderly is often smaller — both physically and socially. Digital technology has an obvious role to play here, by connecting people virtually when being in the same room is hard.

Key lessons:

  • Enable connection with a smaller, more important group of people (not a big, undifferentiated social network).
  • Don’t overemphasize security and privacy controls when trusted people are involved.
  • Be sensitive to issues of isolation.

Life Stage

During a user testing session, I sat with a 66-year-old as she signed up for an Apple ID. She was asked to complete a series of security questions. She read the first question out loud. “What was the model of your first car?” She laughed. “I have no idea! What car did I have in 1968? What a stupid question!”

It’s natural for a 30-year-old programmer to assume that this question has meaning for everyone, but it contains an implicit assumption about which life stage the user is at. Don’t make the same mistake in your design.

Key lessons:

  • Beware of content or functionality that implicitly assumes someone is young or at a certain stage in life.

Experience With Technology

I once sat with a man in his 80s as he used a library interface. “I know there are things down there that I want to read” he said, gesturing to the bottom of the screen, “but I can’t figure out how to get to them.” After I taught him how to use a scrollbar, his experience changed completely. In another session, two of the older participants told me that they’d never used a search field before.

Generally when you’re designing interfaces, you’re working within a certain kind of scaffolding. And it’s easy to assume that everyone knows how that scaffolding works. But people who didn’t grow up with computers might have never used the interface elements we take for granted. Is a scrollbar a good design for moving content up and down? Is its function self-evident? These aren’t questions most designers often ask. But the success of your design might depend on a thousand parts of the interface that you can’t control and probably aren’t even aware of.

Key lessons:

  • Don’t make assumptions about prior knowledge.
  • Interrogate all parts of your design for usability, even the parts you didn’t create.

Cognition

The science of cognition is a huge topic, and ageing changes how we think in unpredictable ways. Some people are razor-sharp in their 80s, while others decline as early as in their 60s.

Despite this variability, three areas are particularly relevant to designing for the elderly: memory, attention and decision-making. (For a more comprehensive view of cognitive change with age, chapter 1 of Brain Aging: Models, Methods, and Mechanisms24 is a great place to start.)

Memory

There are different kinds of memory, and they’re affected differently by the ageing process. For example, procedural memory (that is, remembering how to do things) is generally unaffected. People of all ages are able to learn new skills and reproduce them over time.

But other types of memory suffer as we age. Short-term memory and episodic memory are particularly vulnerable. And, although the causes are unclear, older people often have difficulty manipulating the contents of their working memory25. This means that they may have trouble understanding how to combine complex new concepts in a product or interface.

Prospective memory (remembering to do something in the future) also suffers26. This is particularly relevant for habitual tasks, like remembering to take medication at the right time every day.

How do people manage this decline? In our research, we’ve found that paper is king. Older people almost exclusively use calendars and diaries to supplement their memory. But well-designed technology has great potential to provide cues for these important actions.

For older people, paper is king.27
For older people, paper is king. (Image: Navy Design28208) (View large version29)

Key lessons:

  • Introduce product features gradually over time to prevent cognitive overload.
  • Avoid splitting tasks across multiple screens if they require memory of previous actions.
  • During longer tasks, give clear feedback on progress and reminders of goals.
  • Provide reminders and alerts as cues for habitual actions.

Attention

It’s easy to view ageing as a decline, but it’s not all bad news. In our research, we’ve observed one big advantage: Elderly people consistently excel in attention span, persistence and thoroughness. Jakob Nielsen has observed similar things, finding that 95% of seniors are “methodical”30 in their behaviors. This is significant in a world where the average person’s attention span has actually dropped below the level of a goldfish31.

It can be a great feeling to watch an older user really take the time to explore your design during a testing session. And it means that older people often find things that younger people skip right over. I often find myself admiring this way of interacting with the world. But the obvious downside of a slower pace is increased time to complete tasks.

Older people are also less adept at dividing their attention32 between multiple tasks. In a world obsessed with multitasking, this can seem like a handicap. But because multi-tasking is probably a bad idea33 in the first place, designing products that help people to focus on one thing at a time can have benefits for all age groups.

Key lessons:

  • Don’t be afraid of long-form text and deep content.
  • Allow for greater time intervals in interactions (for example, server timeouts, inactivity warnings).
  • Avoid dividing users’ attention between multiple tasks or parts of the screen.

Decision-Making

Young people tend to weigh a lot of options before settling on one. Older people make decisions a bit differently. They tend to emphasize prior knowledge34 (perhaps because they’ve had more time to accumulate it). And they give more weight to the opinions of experts (for example, their doctor for medical decisions).

The exact reason for this is unclear, but it may be due to other cognitive limitations that make comparing new options more difficult.

Key lessons:

  • Prioritize shortcuts to previous choices ahead of new alternatives.
  • Information framed as expert opinion may be more persuasive (but don’t abuse this bias).

Conclusion

A lot of people in the tech industry talk about “changing the world” and “making people’s lives better.” But bad design is excluding whole sections of the population from the benefits of technology. If you’re a designer, you can help change that. By following some simple principles, you can create more inclusive products that work better for everyone, especially the people who need them the most.

Payment for this article was donated to Alzheimer’s Australia35.

(cc, ml, al, il)

Footnotes

  1. 1 http://bits.blogs.nytimes.com/2013/07/05/technology-workers-are-young-really-young/
  2. 2 http://www.aoa.gov/Aging_Statistics/
  3. 3 http://www.cna.com.br/speakingexchange/
  4. 4 https://www.youtube.com/embed/-S-5EfwpFOk
  5. 5 http://www.economist.com/node/17722567
  6. 6 http://newoldage.blogs.nytimes.com/2014/02/11/what-makes-older-people-happy/
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/01/01-kindle-text-size-opt.jpg
  8. 8 http://www.navydesign.com.au
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/01/01-kindle-text-size-opt.jpg
  10. 10 http://www.nidcd.nih.gov/health/hearing/Pages/Age-Related-Hearing-Loss.aspx
  11. 11 http://webaim.org/resources/contrastchecker/
  12. 12 http://www.afb.org/prodBrowseCatResults.asp?CatID=49
  13. 13 http://www.yorku.ca/mack/hfes2009.html
  14. 14 http://www.medicaldaily.com/finger-tapping-test-shows-no-motor-skill-decline-until-after-middle-age-244927
  15. 15 http://dl.acm.org/citation.cfm?id=1152260
  16. 16 http://www.lukew.com/ff/entry.asp?1085
  17. 17 http://dcurt.is/the-death-of-the-tablet
  18. 18 http://www2.deloitte.com/content/dam/Deloitte/global/Documents/Technology-Media-Telecommunications/gx-tmt-2014prediction-smartphone.pdf
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/01/02-examples-of-technology-opt.jpg
  20. 20 http://www.navydesign.com.au
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/01/02-examples-of-technology-opt.jpg
  22. 22 http://dcurt.is/the-death-of-the-tablet
  23. 23 http://recode.net/2014/08/26/in-defense-of-tablets/
  24. 24 http://www.ncbi.nlm.nih.gov/books/NBK3885/
  25. 25 http://www.psych.utoronto.ca/users/hasher/abstracts/hasher_zacks_88.htm
  26. 26 http://www.oxfordscholarship.com/view/10.1093/acprof:oso/9780195156744.001.0001/acprof-9780195156744-chapter-10
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2015/01/03-paper-is-king-opt.jpg
  28. 28 http://www.navydesign.com.au
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/01/03-paper-is-king-opt.jpg
  30. 30 http://www.nngroup.com/articles/usability-for-senior-citizens/
  31. 31 http://www.statisticbrain.com/attention-span-statistics/
  32. 32 http://www.era.lib.ed.ac.uk/handle/1842/8572
  33. 33 http://news.stanford.edu/news/2009/august24/multitask-research-study-082409.html
  34. 34 http://psycnet.apa.org/index.cfm?fa=search.displayRecord&uid=2000-07430-014
  35. 35 https://fightdementia.org.au

The post Designing For The Elderly: Ways Older People Use Digital Technology Differently appeared first on Smashing Magazine.

See the original article here – 

Designing For The Elderly: Ways Older People Use Digital Technology Differently

Smashing Book #4: Behind The Scenes

If you’re a graphic designer, you will often have to work with off-the-shelf material created by others — for instance, combining ready-to-use fonts with images from a photographer or stock website. Also, you’ll often have to follow the branding already developed by someone else. It’s OK; it’s a part of the job, and you shouldn’t be bothered by it.
But the part of a project that almost every graphic designer likes and is proud of the most is something that you can do from scratch, something that you have control over and can sign off on confidently: illustration.

This article: 

Smashing Book #4: Behind The Scenes

The Smashing Mystery Riddle #2: Have You Figured It Out Yet?

Remember the Smashing Book Mystery riddle from a couple of months ago? Guess what: the Mystery continues! To celebrate the launch of the SmashingConf NYC and our lovely book, we’ve prepared a new riddle, and this time it’s not going to be any easier, but the reward is definitely worth the effort.
How does it work? Below you’ll find an animated GIF that contains a hidden message. Once you’ve resolved the mystery, you’ll see a Twitter hashtag displayed in plain text.

Link: 

The Smashing Mystery Riddle #2: Have You Figured It Out Yet?

Introducing The Smashing eBook Library

The Smashing Library grants you immediate unlimited access to all Smashing eBooks, released in the past and in the future, including digital versions of our printed books. The yearly fee of $99 covers the immediate access to the complete Smashing library with 38 eBooks — you save up to 70% off the regular eBook prices! We think that’s a reasonable price for a total of 60 quality eBooks during the first year.

See original:  

Introducing The Smashing eBook Library

Smashing Book 2: Why We Love It And Why You’ll Love It, Too

Two and a half months ago, the Smashing Book 2 was released. For us, a small independent publisher, it was a big deal, because this ambitious project on which we had been working since July 2010 was also very important for Smashing Magazine. We spent a tremendous amount of time and effort on the little and big details of the book. It was very important for us to get it right this time: to create an outstanding, high-quality book and provide outstanding, high-quality service to our readers.

This article is from:

Smashing Book 2: Why We Love It And Why You’ll Love It, Too