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:
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:
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:
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.
There are at least three components to this, I think. TECHNICAL SKILLS–the CSS and Javascript, the code and the fiddly bits–that's actually the smallest part, and probably the easiest. I'm not too worried about that. I can learn it when I need to, following the tutorials that other people have written. For the few things that aren't covered by Javascript polyfills and StackOverflow answers, I can use trial-and-error to bodge my way through (at least until I understand things better).
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:
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. =)
]]>Here's a rough first pass:
Hmm…
]]>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! =)
]]>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.
]]>
One of the things I like about Smashing Magazine is how the site adapts to different screen sizes. For example, if you view it on a mobile device or in a small window, you'll see a simple header and the story.
The menu icon links to the footer menu, which is used only with narrow screens:
If you have a little more space, the header will include the top-leel site sections (books, e-books, workshops, job board) and the left sidebar will include categories. The search also moves from being hidden behind an icon to having its own space.
Even more space? The left sidebar gets collapsed into a small horizontal menu, and a right sidebar appears with an e-mail subscription form and some highlights from other sections. I wonder why the left sidebar is collapsed into the menu, but I guess it would be weird to have the category list jump from the left sidebar to the right sidebar and then back again, and they probably wanted the e-mail subscription form to be above the fold (so it wouldn't make sense to add it to the left sidebar). The search box is moved to the top of the right sidebar, too, so it looks more like a background element.
Incidentally, here's a little thing that happens when the window is just a little bit narrower – the WordPress menu item gets abbreviated to WP.
And here's what the site looks like when I maximize the window. There's the header, the left sidebar, and the right sidebar.
I also like Smashing Magazine's use of colours – the cool blue matches well with the warm red, for some reason that I can't quite explain at the moment. I also like how they use different grays to make things recede into the background.
When I redesigned my site, I wanted to do something like the responsiveness of Smashing Magazine, so I learned more about using media queries. Here's how my site behaves at different sizes. (Or at least, how it should!) On a small screen, the key links are just hand-drawn icons, and there's no sidebar:
Slightly wider? I can add some text to the links, and I can add a couple of optional links like Random.
On a normal-sized screen, I add a sidebar on the right side.
On a wide screen, I move the post meta information to the left margin.
]]>It's interesting to see how much variety there is even within one company. Adobe uses the Jive platform for its support communities, and the different products have slightly different configurations. Here's the overall product page that leads to the community page:
http://helpx.adobe.com/photoshop.html
Adobe starts with graphical icons for tutorials that have time estimates clearly indicated.
https://forums.adobe.com/community/photoshop
The “Ask the Community” page leads to a page with a lot of things going on, but there's an “Ask a Question” widget in the top left with a quick way for people to ask questions. With the emphasis on points and the leaderboard of top participants, it seems that this community focuses on user-to-user support. That's probably why the Unanswered Questions and Trending Questions widgets are so prominent. Still, the page feels a little cluttered to me. I'd probably prefer to set it up with fewer calls to action. Ask a Question would still be in the top left, but I would probably organize the resources by skill level. I like the way some of the frequently asked questions are highlighted, but they feel somewhat random and not well-formatted.
Different products have different community pages. The Illustrator one is slightly more neatly organized:
https://forums.adobe.com/community/illustrator
I like the announcement box for Illustrator CC 2014 and the Getting Started box in a prominent place. This page feels more oriented towards new users. It still has trending and unanswered questions, but they're below the fold.
https://forums.adobe.com/community/premiere
The Premier Pro community focuses on sub-forums. Based on the forum activity, it looks like the Forums widget does a decent job of directing people to the appropriate place to ask, although the main community still gets many questions. This community is less newbie-focused (no tutorial link). The Recent Discussions widget seems to be a better choice than having both Unanswered Questions and Trending Questions, since the other widgets are visually similar and often have duplicate content.
https://forums.adobe.com/community/aftereffects_general_discussion
The After Effects community has a welcome message and a Getting Started box, which I think are good ideas. They've decided to highlight some discussions as Sticky Threads, too. Unlike the other communities, this community doesn't include messages about translating pages or earning points. I wonder how de-emphasizing points affects user-to-user support…
https://forums.adobe.com/community/lightroom/lightroom_for_beginners
The Lightroom for Beginners community uses graphics (that responsively resize, even!) to make frequently-asked questions more visually interesting.
https://forums.adobe.com/community/acrobat
The Acrobat community directs people to the appropriate sub-forum.
https://forums.adobe.com/welcome
The overall welcome page for the site is static and graphical.
I think the key points I'll pick up from Adobe's support communities are:
Know any well-designed community support sites that offer both tutorials and Q&A? I'd love to take a closer look at them! Up next: Probably Apple, who use Jive as well.
]]>