Welcome to the Salt Zone

This was an interesting bit of research I came across as I read the Design In Tech Report. This article goes over a study done by the OECD showing the tech literacy of different countries and age groups.

The study split people into one of four levels of tech proficiency, from 0-3. Somewhat unsurprisingly you and I would likely fall into level 3, or most proficient. But only 5% of the adult population would fall into this category.

I tend to cut corners when designing because things should “be obvious” to the user, but this study shows that I am 100% not the user here. Heck, 26% of adults apparently can’t even use a computer. In 2019? Really?

Oh hey look, it’s my least favourite part about designing for the web!

As much as I hate Apple, I kind of can’t wait until we’re all using iPhones and Macs so we don’t have to worry about all these different screen resolutions.

I love typography. Which is a shame, because I’ve got nothing important to say. I just like looking at nice type.

An appropriate and well thought out typeface can elevate a text or idea and help it stand out above the rest. The web is filled with so much text (95% full according to Oliver Reichenstein) that you’re going to need something more than cleverly written prose to stand out.

Sometimes when I start a project I worry about what typeface to use. And I think it’s an important decision but it’s affirming to see Reichenstein say that typography is more than picking a font. Renaissance typographers might only have one type to choose from, but it’s how it’s used that matters.

Reichenstein’s admonishment to treat text as User Interface is unfortunately a new concept to me. I’m not great with copy writing, I’m more suited to a blog format.

“Summary: They don't. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences.”

Pack it up, that’s it.

If people don’t read web pages, how does that bode for my blog?

The article speaks for itself, but one thing that stood out to me was the line: “ promotional language imposes a cognitive burden  on users who have to spend resources on filtering out the hyperbole to get at the facts.” Which I suppose makes sense. Users would rather form their own opinions than be told what to think.

In my search for fonts, I’ve come across some really cool sites/foundries.

These are The Fell Types. They’re modern revivals of antique typefaces and I love the bookish look they’ve retained.

Summary: Dribbble is the Instagram of design.

I live in an echo chamber and I just read an article that perfectly reflects my personal opinions on the Dribbble community.

I don’t like Dribbble for many of the same reasons I dislike most social media. It’s vapid, egotistical, and bad for your health. If all you’re looking for is a like and a high five Dribbble might be perfect for you. But if you’re looking for critical feedback you should probably look elsewhere.

It’s difficult for someone to give critical feedback on anything on Dribbble because nothing has context. Design is more than just fancy illustrations or aesthetic redesigns of existing sites. If we don’t understand the goals and users the design is trying to appeal to we can’t criticize the design’s effectiveness.

Dribble provides would be designers a positive feedback loop that is more focused on getting likes and follows than it is on nurturing good design. Illustrations and designs that follow the current popular trend garner more likes, but these trends rarely if ever reflect actual trends within the design industry. You won’t find people like Jony Ive on Dribbble.

Am I a hypocrite for having a Dribble? Maybe yeah.

Do you find yourself reinventing the wheel every time you start a new prototyping project? Do you wish there was a convenient tool to help mock up common UI elements? Like some sort of UX toolbox? Well look no further, UX Power Tools has got you covered.

Speed, consistency, smartness. These are just a few of the things UX Power Tools promises to bring to your workflow. The future is now old man. Gone are the days of creating custom assets, design is now outsourced. Why do it yourself when you can pay someone $48 to do it for you?

This one’s a doozy. I’ve already done much of my competitor research for my project, but allow me to reveal to you exactly what competitor research entails. As if you didn’t already know.

What is competitor analysis?

Before we start a project, we have goals we want to achieve and a service we want to provide. Chances are we’re not the first ones to the scene, and we’ve got competition. Competitor analysis allows us to see how other platforms tackle the same problems we will be, and give us an insight into trends and common solutions to problems.

Why do competitor analysis?

Understand how competitors handle usability

Understand where your product stands compared to competitors

Idea generation

Keep up with trends in your industry

Understand how competitors solve problems

Direct vs Indirect competitors

It’s important to understand what you’re up against. For platforms like Uber, Lyft would be a direct competitor. Both platforms target the same users and achieve the same goal. An indirect competitor might be Just Eat to Uber Eats. Both have a similar goal, but Uber’s main drive (heh) is its taxi service, not its delivery service.

How is it done?

A lot of people have a lot of different opinions, but I’ve sort of summarized the process given here, which I think it a pretty good start.

Pick competitors (6-10 examples)

Define criteria, what features or elements are we looking at?

Pick a recording method. A lot of people suggest spreadsheets. Columns for criteria and yes/no answers for each competitor.

Gather material. Names, URLs, screenshot as you go. Make sure to look at both desktop and mobile.

Start reviewing

Prepare analysis report. For a solo project like mine this isn’t really relevant. But when working under a project manager I suppose it’s something that needs to be done.

Summarize Findings:

Brief Summary

List of takeaways

List of recommendations and next steps

Notable findings

Screenshots

Links

Mattish - Competitor Analysis

A Designer’s Guide To Competitor Research

Following the theme of my website, I decided to look at unique typographical elements. My search brought me to a site called Shady Characters, maintained by Keith Houston. Keith is a punctuation enthusiast, he's written a series of articles on various unique typographical elements as well as a running series on emojis.

Sprinkled throughout Shady Characters are some lesser known elements like the † dagger, ¶ pilcrow, § section sign, and ‖ pipe. I'm not entirely sure what all these esoteric hieroglyphs mean, but it did give me a place to start looking for my own glyphs to use.

Wikipedia has a handy catalogue of typographical symbols that go over the history and use of each symbol. In the end I chose a small handful to use in my site.

❧ Fleruon - Fleuron is a probably French word but the mark itself is actually Latin in origin according to Wikipedia. Nowadays the mark is purely decorative, and that's how I'm going to use it. I'll probably use the mark to indicate the end of a passage of text.

⁂ Asterism - The geometric Asterism looks a little like the Therefore sign. This mostly obsolete symbol is used to "indicate minor breaks in text" or "call attention to a passage".

& Ampersand - The Ampersand isn't really all that obscure. It's a favourite of hipster brands and sign painters for a reason. It just means 'and'. Well sort of. An ampersand indicates an 'and' of closer relation, largely used when joining two names like 'Johnson & Johnson', 'Marks & Spencer'. The ampersand here indicates that the two names are related somehow. 'Heroes & Villains' also just looks a lot cooler than 'Heroes and Villains'.

† (Double) Dagger - Apparently also known as a, obelisk or obelus. Used to indicate a footnote in a piece of text, especially if an asterisk has been used. The double variant marks a third footnote, kind of like a P.S.S. There's even a Triple Dagger, for the truly adventurous.

Type Round 3

Heading: Larsseit; Body: Libre Baskerville

Heading: Playfair; Body: Cardo

Heading: Playfair; Body: Plantin

Heading: Priciono; Body: Merriweather

Heading: Wremena; Body: Plantin

Heading: Young; Body: Plantin

Type Round 2

The typeface here, in order from top to bottom, left to right:

Heading: Butler; Body: Plantin

Heading: Butler; Body: Source Serif

Heading: Cormorant Garamond; Body: Cardo

Heading: Goudy; Body: Goudy

Trying Out Type

I’ve been trying out several typefaces for the Heroes & Villains website. I want to give a feeling of elegance and sophistication with the typeface choice, while keeping it readable.

The typefaces in the bottom samples are, from left to right:

Heading: Begum; Body: Fanwood

Heading: Begum; Body: Merriweather

Heading: Begum; Body Plantin

Heading: Butler; Body: Cormorant

A Little Colour Theory

Considering the brand of our learning platform, I started thinking about colour. During my research I noticed there was a heavy attraction to the color blue.

You can take a look here at this article on Smashing Mag to read a little about colour associations.

Here are a couple things I noted during my research:

Blue is by far the most commonly used color. Blue is often associated with reliability, knowledge, and trust. It’s soothing and calm. Lighter blues have more energy whereas darker blues are often used for corporate branding because they give a feeling of strength and reliability.

Green is used quite a bit but less often than blue. I noticed that platforms that were targeted towards a younger or beginner audience used more green. Examples include Khan Academy (and Khan Academy Kids), freeCodeCamp, and Edabit.

Yellow is often used as accent colours. I reckon that’s because it goes well with both green and blue. Yellow is one of the most energetic colors, which works well for buttons and call-to-actions.

The more expensive and professional platforms stayed away from high energy colors like yellow and red, except in buttons and call-to-actions.

Generally, the more money the course costs, the less colourful the branding is. This makes sense, if the branding gives off too childish a vibe I’d be less likely to give the company my money.

During my benchmarking research I thought about what a non-linear learning experience might look like. What if we could pick and choose what skills and principles we learn and in what order? Maybe because we also talked about gamification, I started thinking about video games.

Above: Maplestory 2; Below: World of Warcraft

Oh yeah, this brings me back to 2006.

It’s common in MMOs (like WoW, PoE, other three letter acronyms) for players to be able to customize their characters with a Skill Tree. Points are spent each level to add skills or level up already owned skills. The original intent was probably to allow each player to have a slightly unique build compared to other players. Unfortunately that rarely pans out as meta builds and dominant strategies are discovered. But it’s the thought that counts.

What could this mean for an online learning platform?

We could create a non-linear learning experience whose path is dictated by the user. Core modules and principles would branch out in diverging paths that the user could pick and choose from.

Each principle or module could give credits that contribute to the overall learning progress. Maybe you need a certain number of credits to ‘graduate’ or level up. This sort of gamification could be a determining factor in keeping the users’ interest and contribute to a long lasting relationship with the platform.

Perhaps leveling up could unlock more modules to pick and choose from.

By the time the student ‘graduates’ the path they took to graduation would look different than any other student. They would learn basically all the same things, but they did it at their pace and in the order they wanted to.

What if we wanted to be really evil?

Azur Lane is the best goddamn game on the market, you can fight me over it

A lot of mobile games operate with an energy system. This has a few benefits:

Limiting energy (and by extension the amount users can play) provides an opportunity to generate revenue by selling more energy. Users effectively pay to play the game.

Limiting energy and play time can extend an otherwise short game experience. Most mobile games are idle clickers. If the user was given free reign they would probably get bored very quickly.

For the company this is great, though the general user would likely disagree.

We could apply such a system to our learning platform:

Maybe each student has a limited number of energy tokens per day. Each lesson or module costs a certain number of energy tokens. When the tokens run out, they can’t unlock new lessons. Old lessons should probably be kept unlocked to keep the students busy.

Chaotic Evil option: We could charge users for more energy tokens, allowing them to learn further. I don’t like this idea, and I think it goes against the spirit of what we’re trying to do. But hey, I need to pay rent.

Lawful Good option: We have energy replenish on a timer, or give tokens as rewards for completing tasks and milestones. This feeds further into the gamification idea.

Limiting the amount a student learns in a day is actually beneficial. The human mind can only take in so much new information in a day. Forcing the student to go back over previously learned content will strengthen their understanding of learned principles.

By essentially limiting access to new content on a timer we can create a demand for new content. The student will look expectantly towards unlocking new content the next day. It’s simply Economics 101!

I’ll start off with an example from class last week. Chris mentioned Soundcloud as a possible inspiration. He noted that at anyone with an account can add comments timestamped to specific points in the song playing. When you play back the track it displays the comments at those specific times.

Behold my superior musical tastes.

I thought Twitch used to do something similar back in the day but I can’t find any evidence of this. It must have been something I dreamed up in a fever dream. However, there are loads of streaming sites that do what I’m thinking about.

Nico Nico Douga is probably Japan’s most popular streaming site. Is my inner weeaboo showing through yet? Anyway, when watching a stream, the comments in chat crawl across the screen like a marquee. Could an education platform benefit from something like this? Would it benefit learners to see comments about the content they are learning as they are watching?

People - not me - seriously spend so much time watching shit like this.

What could this mean for our online learning platform?

Students could leave comments, recommendations, critiques, etc. during lessons that would display for other users.

Timestamped comments might crawl across the screen or appear on sequestered areas of the screen for other students to see. This could indicate important parts of the video that might require more attention.

The Adjacent Possible

This is a great summary of Steven Johnson’s “Where Good Ideas Come From”. You should give it a read! I admit I didn’t initially get the idea of the Adjacent Possible when I first encountered it, but this article helped me understand what Johnson was getting at.

Ideas don’t happen in a vacuum, they are the result of the communication and sharing ideas. Maybe one of the reasons for the increased rate of technological advance is how easily we can share ideas nowadays.

For designers, we couldn’t dream of a more perfect environment. I don’t have to leave my bedroom to get in contact with thousands of other designers and to share ideas with them.

For us, The Adjacent Possible means we don’t have to keep to our own areas of expertise to find inspiration. Just because we are designing an online learning platform doesn’t mean we only have to look at other education platforms for insight.

We’ve looked a lot at different online learning platforms for inspiration for our product so far, but if Steven Johnson is to be believed, we should also be looking elsewhere.