The Supernote A5X is an e-ink notebook that lets me draw in black, white, and two shades of gray. It has a drawing app that supports other shades of gray, but the main notebook app and the PDF annotation is limited to those two shades of gray.

I like to use a dotted grid in order to write in neat lines. I used to manually change this template to a white one before exporting. Then it occurred to me to make a coloured template:

Using colour lets me use a darker grid, which is more visible on the Supernote, while still letting that grid blend into the background if I export without processing. Screen mirroring shares the grayscale version, though.

I use my recoloring script to change #a6d2ff (light blue) to #ffffff (white).

Here's the SVG source in case you want to customize it. When I exported the PNG from Inkscape, I needed to make sure that antialiasing was turned off. This involved unchecking the "Hide export settings" checkbox in the Export dialog, then setting Antialias to 0. source

My current color scheme is 9d9d9d,c2c2c2,c9c9c9,f6f396,cacaca,f6f396,a6d2ff,ffffff', which maps light gray to a highlighter sort of yellow and dark gray to a light gray. I used to map the dark gray to a dark red like the links on my site, but light gray is more flexible for shading and layout.

Anyway, here's an example of the export from my Supernote and the result after processing:

(This sketch is How to Take Smart Notes, one of my visual book notes.)

I use a CSS rule to invert my sketch colours when viewed in dark mode:

@media (prefers-color-scheme: dark) {
    .sketch-full img, .gallery img, .left-doodle, .right-doodle, .center-doodle { filter: invert(1) hue-rotate(180deg) brightness(150%) contrast(0.9); }
}

which is not fine-tuned or amazing, but it reduces the glare from the white background when I browse on my phone at night.

Sometimes I switch things around and use blue/dark blue instead. I now have some Emacs Lisp code to let me somewhat interactively recolour a sketch from the Emacs text editor so that I can change the colours in a sketch as I'm writing a post about it.

Using a coloured template and a script to change the colours around has made my Supernote workflow more convenient. I don't need to change the template on new pages. I just export the image, sync with Dropbox or use the Browse & Access feature, and run my processing script. My processing script also uses Google Cloud Vision to recognize the text, rename the sketch, and file it in the appropriate directory, so it's pretty smooth. It's pretty idiosyncratic, but maybe you might be able to adapt the ideas to your own setup. Hope this helps!

I want to write more, and I want to enjoy going through my archive. Some posts are long, especially those that come from transcripts. If I sat with the ideas for longer, I might be able to make them more concise or break them up into more atomic notes; but I also want to get things out faster in order to learn from potential conversations. So I'm thinking about text structure and margins, since I want to re-read my blog more and I sometimes glaze over when there's lots of text.

More headings are a good start. Org Mode makes it easy enough to add them: M-RET calls org-insert-heading.

I'm experimenting with sticky tables of contents on large screens: one for "on this page" on the left, and one for long posts on the right.

On the individual post page, it'll just be the table of contents for the post, like this one.

It feels a little busy. If I write some Javascript, I might be able to use IntersectionObservers to highlight where we are. Maybe I can even squeeze the article's TOC into the "on this page" TOC if there is one, which means it can stay on one side.

I want to do other things with the margins. Doodles for fun? My cargo bike post started with the doodles pulled all the way into the margins, and then I moved them back into the text so that I don't have to worry about bumping into the table of contents.

Sometimes I use a sketchnote to help me think through or summarize a topic. It might be fun to use the sketchnote as a table of contents or overview, maybe even highlighting different sections of it as I scroll. handwritten.blog uses mix-blend-mode for hyperlinks. If the SVG isn't too big, maybe I can use the same kind of technique I used in animating SVG topic maps with Inkscape. Alternatively, I could put extracted regions from the sketchnote in the margins for context and visual variety.

Sidenotes? I like how A Scripter's Notes has both an active, expanding TOC on the right as well as side notes on the left.

Karthinks uses a sticky TOC and sidenotes:

A Blog With Relevant Information uses just sidenotes, so the rest of the page feels pretty clear:

Maybe keywords, like the Cornell method of note-taking? Kind of like sidenotes, but more structural, for skimming. I'm having a hard time finding a blog example, though. If I figure out side nodes, I could probably just use a different style to indicate those Cornell-style cues.

But there's so much more I want to do with the space. I like the stacking of https://notes.andymatuschak.org , and I like that you can link to a particular stacked state.

Then every so often, I come across a blog that is just clean and refreshing and then I want to get rid of everything in the margins.

There are plenty of CSS and JS resources out there. Figuring out what I want is the tough part.

I’ve been thinking about building more tools for myself. Some of the ideas I’ve been playing around with are around simplifying activity tracking further, possibly getting it to the point where it suggests things for me to do when my brain is fuzzy.

My current tracking system has two tiers. For my most-common activities, I use a custom menu that I can open from my phone’s home screen. I created the menu using Tasker. It’s easy to configure menu items to update my Quantified Awesome activity records as well as run other logic on my phone. For example:

• “Eat dinner” creates an activity record for “Dinner”, then starts MyFitnessPal so that I can log the meal
• “Walk home” creates an activity record for “Walk – Other”, then starts step-by-step navigation of the walk back to my house
• “Sleep” creates an activity record, then launches Sleep as Android
• “Ni No Kuni” creates an activity record, prompts me for what I want to do after an hour of playing, opens a page with tips for the game, and then reminds me of my plans after that hour passes

One advantage of using something on my phone is that I don’t have to wait for the initial web page from Quantified Awesome to load. My keyboard occasionally takes a while to come up, too, so the menu-based interface gets around that as well. Also, as I get the hang of using Tasker, I can set up more intelligent processes. The menu has a link to open the web version, so if I want to track something less frequent, I can always use the web interface.

In the web interface, I usually type a substring to identify the category I want to track. For example, “kitch” results in an activity record for “Clean the kitchen”. I use this interface if I need to backdate entries (ex: -5m), too.

In addition to the two interfaces above, I’ve been thinking about taking advantage of the predictability of my schedule.

Research into adaptive menus turns up quite a few design ideas and considerations. Since I’m building this for myself, I can get around many of the challenges of adaptive interfaces, such as privacy and predictability. I’m curious about the following options:

• Text-based input with minimal cues, as part of a more powerful command line
• Context-sensitive menu with a handful of items (3-4, with a link to more): I can probably suggest candidate activities based on the past two activity records. That might mean a little bit of latency as I check, though. It also means that the menu will keep shifting, so I’ll need to read it and find the item I want to click on.
  • For everyday use?
  • For really fuzzy moments?
• Static menu of frequent items, but adaptive highlighting (ex: green or bold, or fading out other things slightly)
  • Abrupt onset, others fading in over 500ms
  • Colour?
  • Weight?
• Split menu: frequent items on top, everything else below
  • Static
  • Adaptive
• Hierarchy of menus: speedy, but lots of tapping
• Cut off menu: show only the activities that come after the one I’ve just tracked

Hmm… It might be interesting to play around with different menu options. It would be good to experiment with NFC as well, especially early in the morning. =)

Related:

• “Dynamic versus static menus: an exploratory comparison (Mitchell, Schneiderman 1989): people preferred static menus
• “Comparing static, adaptable, and adaptive menus” (Findlater, 2001): people liked split adaptable menus
• “Exploring the design space for adaptive graphical user interfaces (Gajos, Czerwinski, Tan, Weld, 2006): spatial stability – copy instead of move, adapt slowly
• “Ephemeral adaptation: the use of gradual onset to improve menu selection performance” (Findlater, Moffatt, McGrenere, Dawson, 2009): abrupt onset + fading in other items
• “Predictive menu selection on a mobile phone” (Bridle and McCreath, 2005): Mobile considerations

I'm working on learning more about design. I don't think about it all the time, but sometimes I check out design blogs like Little Big Details and CSS Tricks. I'm getting the hang of sketching several variants instead of jumping straight into the first idea I have, and sometimes I even show those wireframes to other people before coding it up.

Someone asked me where I'd rate myself on a scale of 1 to 10. It's hard to do that without thinking about what 1 and 10 are and what's in the middle. Besides, I know that the scale will keep shifting anyway. I'll never ever get to 10, and this is good. There's always more to learn.

Anyway, here's what I came up with. Which, on reflection, might be overstating it. Sometimes I feel like I'm still throwing everything in including the kitchen sink. But at least this gives me a map, a You Are Here, and more usefully, a sense of what the next step on the path might be.

DESIGN SENSE–now that's tough. I can read all the usability books I want. I can study the key principles of visual hierarchy or grouping. I can take a master's degree in human-computer interaction. (Wait, I did!) I know I'm supposed to keep the end users in mind, either by talking to people directly or by keeping personas in front of me. I know I'm supposed to keep things simple and discoverable, with affordances that encourage you to use things in the right way.

I can mostly find my way down well-worn roads. (Want a real-time status update visualization? A mosaic of news items on the front page? A multiple choice survey? Gotcha.) I am often asked to come up with something new, though. Sometimes it's just new to the group, so we figure out what people want after a little back-and-forth. Sometimes it's new to me, and I have to do some research. Sometimes, I suspect, I'm trying to come up with something a little new to everyone. Or at least it requires a lot more translation to find something familiar to draw on.

But there's still so much more to learn before I can confidently sift through conflicting feedback, before I can guide people from vague ideas to that flash of recognition: “Ah, yes, this is what I wanted.”

I don't know if it's just a matter of experience. I've worked with designers on web projects and I've disagreed with them. (Gradients? Really? And you want that to do what?) I've also worked with designers I got along really well with, especially the ones who weren't coming from a print background and who knew the difference between what looked flashy and what was easier to do on the Web.

So. Design sense. This is the part that intrigues me the most. I'm working on developing opinions. It's not just about memorizing a bunch of principles or applying the latest fads (from skeumorphic to flat, from static to parallax, etc.). I think it involves being able to see, understand, and recommend. Browsing through design blogs doesn't really help me with this. I have to slow down and think about why something works, why it doesn't, what other variants I might try, why I like something or another. And then, beyond opinion, there's also measurement: revealed preferences often go against what we think we want.

This is where WORKFLOW comes in. I've been working on resisting the temptation to jump in and start coding things right away. Instead, wireframing possible designs means I can play around with how something looks and behaves, changing it with less friction. (It also means I can turn ideas over to team members in case they want to use that for development practice.) Getting the hang of wireframing will also help me try different variations while being less invested in them.

Research can help me quickly find different types of the same idea, so I can broaden my horizons. For example, looking at a few support communities (Adobe, Apple, and Skype) gave me a better sense of what I liked about each of them and why.

My main challenges for design and workflow are:

• How can I apply what I'm learning within the constraints that I have? For example, it's one thing to know that testing is good. It's another to think about how I might do A/B testing without proper analytics and without hundreds of thousands of views.
• In the absence of stronger metrics, how can I work with conflicting feedback? Can I get better at generating different variants to help people find something they agree on? Can I get faster at working with low-fidelity prototypes or in-browser code?
• How can I recognize familiar aspects in new ideas, and get better at cobbling together well-tested ideas from different places? Hmm. Come to think of it, it's a little like those Master Builders in the LEGO Movie, isn't it? There's something about that ability to look at something and say, “Oh, that looks unfamiliar, but it's really like A and B and C.” I do this kind of connecting-the-dots outside design. I can learn how to do it here too. (Analogies are another way to practise this. =) )

I'll probably be able to get the hang of the tech along the way, so I'm not worried about it.

I think this will help me learn the kind of design I want. I'm not really interested in the kind of design that involves following fairly well-sorted out paths making snazzy websites for other people, like WordPress theme customization or development or things like that. I can pick that up if I need to, probably.

I'm more curious about getting better at designing new(ish) things, the kind where I can't just pick a few sites for design inspiration, the kind where I'm making something I haven't seen before and I have to decide what to show and how it behaves.

Oh! Here is another version of that sketch, in case you want to fill it in yourself. =)

My client had been bringing me a constant stream of little technical challenges to solve. I pulled together different tools to make things happen: AutoHotkey, NodeJS, shared files, optical mark recognition, and so on. He said it was fun watching me figuring things out. It got me thinking about how programming can involve many different types of creativity. If you can tell the different types apart, you might be able to focus on improving some of those aspects.

2014-09-10 Programming – What does it mean to be creative?

Here's a rough first pass:

• Design: Probably the most obvious form of creativity in development, whether we're talking about interfaces or architecture.
• Imagining or anticipating needs: When people don't even know what they're missing
• Imagining practical applications: Starting from the solution or from an available tool
• Seeing gaps and being curious about possibilities: Maybe related to anticipating needs? More like, “Hmm, what if?”
• Collecting components/capabilities and combining them: API functions, tools, etc. Like collecting puzzle pieces and then being able to dig up the right combination later on.
• Making adapters: Smooshing different systems together.
• Generating variants and other ideas: Coming up with different approaches, or coming up with variations on a theme.
• Incorporating feedback and iterating effectively: Probably related to generating variants or shaping requirements, but also related to getting beyond vague requirements or too-concrete requirements.
• Breaking things down and building a plan: Seeing the components and figuring out a good order.
• Shaping requirements: Translating vague requirements/feedback or seeing past what people think they want.

Hmm…

I've looked at Adobe and Apple, both of whom run their support communities on Jive. Here's a look at Skype.

Skype uses a typical forum layout (categories, forums, # of topics, # of replies, latest post) with extra widgets to highlight announcements, contributors, solutions, and blog posts.

Forum pages list threads, number of views,  replies, and kudos. Sticky threads are labeled as “floated”. As with Apple, I'd probably link to relevant knowledgebase categories from here, to save people the navigation and to encourage them to explore.

The forums include a link to this welcome post. It includes brief instructions and quick links.

The News and Announcements section is a list of blog posts with excerpts. The light blue line that separates each post practically disappears into the page background. I would probably make the author photos consistent-width, post titles more prominent (probably darker, larger, and flush left with the margin) so that they're easier to scan, include a slightly longer excerpt, and maybe make the kudos icon less prominent. The bright green makes the kudos icon the most salient thing on the page.

By golly, I'm actually starting to develop opinions! =)

I'm looking at how people design help/Q&A communities to support a wide range of users. After looking at Adobe's examples, I'd like to focus on another company well-known for design savvy: Apple.

Apple uses a two-screen automatically advancing carousel on its front page. I find that curious because the carousel doesn't pause when you hover over it, although I guess that with only two slides, you can always wait until the icon you want slides back into place. If Apple did that in order to keep the Apple Support Communities and Contact Us links above the fold, I wonder why they didn't move those links up higher and then keep a static list of icons underneath it instead. Anyway…

The main overview page has a big, simple Ask a Question widget that dynamically searches as you type. Underneath it, there are icons to the featured communities.

Clicking on an icon shows icons for subcommunities.

All the communities I've checked out seem to follow these lines. Big group icon, group title, ask a question box right underneath the group title. There's a manual slider with a custom category filter that loads the discussion list using AJAX, avoiding a page refresh.

Some of the communities have a Top Participants widget along the bottom.

The Apple communities focus exclusively on Q&A – they don't link to tutorials or other resources to help people get better at using things. IF you click on the Content link, you can find tips, but they're hidden and tend to fall off the recent content list. The Content link lists content for all the communities, not the particular community you're interested in – the Apple discussions theme doesn't include a link to the content for your particular community.

The discussion-focused approach is interesting, but probably a little too severe. Providing links to tutorials and frequently asked questions can help people who are getting started and don't know what they don't know. This information is available elsewhere (ex: http://www.apple.com/support/mac/), so that could explain why it's not duplicated in the support site. Anyway, Apple's support communities are clean and stripped down to the essentials.