laboratory
Evernote setup
so far.
[Updated] GTD/Evernote System Inspired by Kelly Forrister, 40Tech, Zen Habits, and Experimentation (Part 1)
Update: Commenting has been restored after a problem with a new plugin. Thanks for letting me know, everybody!
At the beginning of 2011, GTD Times posted an interesting article called “Waiting For” Advice. Within that post was a screenshot of the GTD setup that Kelly Forrister (GTD coach at DavdCo) uses via eProductivity. Instantly I could see a killer Evernote notebook structure that would work great without the need for stacks (read: works great on all mobile operating systems).
Here’s the notebook structure:
This setup is stupid simple and has been fairly bullet proof for several weeks now. Every action is within easy reach, whether I’m on the web or viewing my notes on a mobile phone. Routines, a Kelly Forrister recommendation, is a notebook of checklists, marked as daily, weekly, monthly etc. When… is a list of actions I intend or need to take once something has happened or I’m in a particular place in the future (such as “When I’ve moved into the new apartment”).
Zen Habits also inspired me to add an M.I.T. notebook that reminds me of the most important tasks of the day.
But there were several things missing from Kelly’s setup I thought could be added to the Evernote setup:
- Project support files
- Ticklers
- References
Project support files
As recommended by David Allen, we should have a list of our active projects. I accomplish this with notebooks, one for personal projects, the other for work. These notebooks DO NOT contain support materials, since that would clutter the view.
Instead I create tags that match the name of the project, assign the tags to the proper support notes, and store the notes in 04. Support (projects). Because Evernote allows linking between notes, I can even filter by tag then copy and paste the note links into the parent project note. Works like a charm.
Ticklers
For a solid Evernote based tickler system, I’ve turned to the setup that 40Tech.com posted about a while ago. Requires tags for Days (1-31) and Months (January – December). I have a notebook called Ticklers so anything can technically be thrown in there, but assigning tags makes filtering (and obviously reviewing by day/month) a breeze.
References
For me, References are old files I want to keep. Based again on a recommendation by David Allen, I’ve created A-Z tags with the occasional subtags for further filtering. Everything is tagged alphabetically.
Obviously I haven’t tagged every note quite yet.
Other GTD needs
So far this seems to be the most straightforward and easiest to maintain GTD setup I’ve ever used in Evernote. Granted I’ve not yet covered all our needs; Areas, Goals, Calendar, and other topics still need to be adressed.
As always, feedback is welcome and I hope my ideas are helping!
Related Posts:
11Mixed.
Problems with HD System 3 and Two Alternative Evernote/GTD Setups
After weeks of experimentation with HD System 3 for Evernote/GTD I’ve decided to move on. Here are a few reasons why:
- Stacks. These are not available on the iPhone.
- Too much commitment. The hold-your-hand approach worked extremely well, but failed the does-it-work-when-I’m-ill test. Too much to think about.
- Hard to learn. If you already know GTD, then HD3 might be beneficial. If not, I fully expect a “say whaaaaaat?”
- Routines. While I’ve been very successful at pushing beyond GTD with Evernote, many of these extensions and experiments needed to be more a part of my calendar, less within my Evernote setup. I’ll try to elaborate on this in the future.
Now my experiments have led me back to a note-equals-list approach with a renewed use of tags, something I know will work on all phones.
Additionally I’m focusing on setups that are reproducible and exportable; in other words, could this setup work also as desktop text files/folders or as paper?
Alternative Evernote/GTD Setup #1
This setup uses very few notebooks, one note per project (excluding references), and one note per context. Tags are used a little bit for sorting.
Notebooks:
- !nbox
- 00. Today
- @@today. Must be done today (not very GTD)
- @agendas. Listed by name of person
- @calls
- @computer. Sometimes divided into searches, social networks, or whatever (e.g. @computer-search)
- @errands
- @home
- @office
- @waiting for… List by name of person
- 01. Projects
- 02. Someday/Maybe
- 03. References
- Lists
Tags:
- *Areas
- Personal
- Work
- Lists
- Checklists
- Copy and Paste
- Ideas
- Shortcuts
- Projects. Subtags for client names or other filters
- References. Many subtags
Alternative Evernote/GTD Setup #2
This structure is mostly based on a screenshot posted to GTD Times by Kelly Forrister of DavidCo. Straightforward and simple, this setup is the focus of my latest experimentation.
Unlike #1, alternative setup #2 uses one note per task which is nice because it makes it easy to collect and process. However it requires many more notebooks, most specific to a context. Tags come in handy here for filtering.
Notebooks:
- !nbox
- 00. Today
- 01. Projects – Personal
- 02. Projects – Work
- Agendas
- Anywhere
- Calls
- Computer – Personal
- Computer – Work
- Errands
- Goals
- Home
- Library
- Lists
- Office
- Read/Review
- Reference
- Routines. Checklists I run through at specific times and days. Many are daily and weekly, but some are more specific like “Monthly – 01″ for things I always do on the first of the month.
- Someday – Personal
- Someday – Work
- Study
- Waiting for…
- When… Love this. Lists of actions for when I’m next in particular cities or circumstances. E.g. After I have iPhone
Tags:
- *Areas
- Personal
- Work
- Anywhere
- Brainstorming
- Decide
- Computer
- Calendar
- Online
- Search
- Shopping
- Lists
- Checklists
- Copy and paste
- Ideas
- People. Subtags are names of people.
- Reference. Subtags are numerous but include GTD, UX, CSS, etc.
- Routines
- Daily
- Monthly
- Weekly
- Yearly
Summary
I do apologize for the extensive bullet points; I’m sure screenshots would have been more concise, but my experiments have kept my setup too much in flux recently. However with the start of a new job in a new city, I’ll need to be sticking with the tried-and-true for a while so perhaps an update with screenshots won’t be too far away.
I’m anxious to hear your feedback.
Related Posts:
1for GTD?
anywhere and flexible
enough to suit my
imagination.
[Updated] How I’m Pushing Beyond Unimaginative Evernote GTD Setups with HD System 3
Update: More screenshots have been added as a gallery at the end of the post.
Inspiration has struck once again. Took boredom, dissatisfaction, and a little betrayal, but I found it.
I found it by thinking about how all the GTD setups I’ve seen and created didn’t really help me do much of anything. They were unimaginative, lifeless, boring, and quite often facsimiles of GTD apps. Beyond the cyclical urge to fresh things up, where was the motivation?
So I was inspired to create a better way, an approach within the ever customizable Evernote ecosystem that would coach and inspire every step of the way. Hanami Design System 3 has the promise to be that system.
Some basic GTD stuff
Since many people who visit my website are interested in Evernote GTD setups, here are a few highlights:
Basic Evernote notebook setup for GTD
An interactive daily review
The new Daily Review stack is arranged to be interactive, not passive. You actively move through the notebooks, one by one, in order, moving notes/projects in and out based on the action required at that step.
Tools such as checklists and filters are kept within the appropriate notebooks. Scan Ticklers holds my tickler notes; Filter Projects gives helps me determine whether a project is worth doing now or even keeping.
- Clear emails. Deal with emails and send what’s needed to Evernote.
- Clear notes. Create new notes from what I’ve been jotting down on paper. Drag actions to the appropriate context notebook (under Next Actions), create new projects, etc.
- Scan ticklers.
- Review calendar. Last week, this week. Create actions (new notes) and drag them to the appropriate context notebook.
- Filter projects. Drag all active projects here and filter them. Move the first to the next notebook.
- Create next actions. Review projects and create next actions (by creating new notes). Move notes to the appropriate context notebook. Move project to Schedule today (next notebook).
- Schedule today. Block out time for the project on my calendar (if possible). Move project note back to Active (under Projects). Go back to filter projects until all have been reviewed.
This arrangement forces me to do something at every step. I sort, I filter, I review, and I’m less likely to skip. Next actions are created within each notebook and quickly dragged to where they’ll be attended to next.
Two Minutes
If I spot something in my inbox (or anywhere) that can be done in two minutes or less, I drag it into the Two Minutes notebook and then do that something immediately.
Since a GTD enthusiast already knows he/she should be doing two-minute items right away anyway, this might seem superfluous, but the reminder and the satisfaction of seeing a two-minute item killed instantly has made this notebook worthwhile for me.
Beyond GTD
As mentioned at the start, my playground wasn’t limited to just David Allen’s Getting Things Done. From the Five S’s, I’ve taken steps to put tools (such as checklists) where they’re most needed. From Scrum, I’ve begun putting active projects I can’t yet schedule into the Backlog. Someday/Maybe items are in the Icebox.
Methodologies and concepts such as Lean/Six Sigma; Muri, Muda, and Mura; and kaizen (among others) are also influencing Hanami System 3, but their contributions are outside the scope of this post.
In development
Obviously I’ve not covered everything this system does and unfortunately further updates will have to wait for me to return from a two week break from writing. Rest assured that I’ve very far along with fresh ideas on how Evernote can be leveraged for a task and life management system and I’ll be anxious to get your feedback.
Take action and take care.
Related Posts:
11user interface
Improving the User Interface and Experience of FanTogether, Part 2: Find a Sports Bar
FanTogether is beginning to come together (enough for beta, anyway) and I thought I’d share a few of my latest contributions to the “Sports Bar” section.
Even though we’re developing with a minimal set of rules, I feel it’s important to keep the tone personal, the forms simple. Furthermore, I’m trying to avoid obvious forms wherever possible and build interfaces that seem more spoken.
The first version of the Sports Bar view focused on two functions: search and addition. While both of these were technically fine, they seemed too impersonal for the kind of experience FanTogether should provide.
First version of the Sports Bar view
After a bit of playing, I decided to combine the search and add functions into a single sentence that sat nicely above where the results would show.
Second version of the Sports Bar view
To make things more useful, I added some jQuery that would set focus to the first text input when the document was ready. To support this, I added a peach-ish focus style.
Text input focus styles now added
To support more advanced users, I next worked on a decent outline style so users could see where they were tabbing to (via the keyboard). Unfortunately I had to stick with a square outline since there’s almost no browser support – planned or existing – for a CSS based radius on an outline.
Outline styles added
Next I expanded the map to fill the available horizontal space, followed by a basic table with jQuery-based zebra striping.
Second version of the results area with new table (1st version)
Making progress.
We’re chipping away at the app and are nearing beta. Hoping to make the big announcement soon.
Related Posts:
2for MarketWatch
Market Watch Redesign Experiment, Part 1: Network Bar and Header (web only)
I have a mild fascination for stock market websites due to the shear volume of data. Most are tests in patience at best, others more bearable. MarketWatch seems to be one of the better in terms of layout, but they’re just as chock full of info.
I think MarketWatch could be simpler. This experiment challenges my assumptions.
Please note: I’m not trying to reinvent MarketWatch and I don’t assume that I know their business or their needs any better. The sheer volume of their content makes it hard for me to breathe and I’m testing myself to see if maybe I could generate a few solid ways to make it better. I want to simplify while reusing as many of the elements as possible. I’m assuming, too, that everything has a purpose, that I can’t just randomly throw features out or make MarketWatch look like a business they are not.
Current header for MarketWatch
Since I’m designing top down, I first focused on the “hat_div”, black bar at the top of the page. This typically serves as a website promotional tool for companies in the network; in the case of MarketWatch, it’s also where user’s can search.
On other websites in the network, the search box may or may not be present, all depending on the needs of site (as far as I can tell). I’d be curious to find out how well this really promotes as I have sneaking suspicion that it’s more often overlooked. So I decided to lump all the site links into a single network menu, prominently featured to the left.
I also move the design away from using the background of the page as the color of the “selected” network tab. Looks wonky on many sites in the network. A thin light line was also added to make body/network bar separation more pleasing.
On the main menu of MarketWatch is a membership promotion that I didn’t feel was getting the proper amount of visibility. I’ve move this to the middle of our now much freer network bar. Search stays where it is because the top/right is a natural place for search; having it here also makes sense network wide.
Currently the world map/summary that indicates which markets are open/closed and the status of the DOW and the like is squeezed in beneath the logo. Not sure how much visibility this really needs, but I’ve made a few enhancements and gave it a more prominent place.
Among other things, I’ve made “open” more bold and gave all the text a bit of a size/space bump. This move made it possible to free space around the logo, better focusing the brand. I’ve left date and time basically where they were.
Where this focus on the map/summary is risky is how it reduces the emphasis on news. Frankly I don’t understand why the featured articles were given so much real estate – but there may be a legitimate business reason.
In my approach, I’ve altered the featured articles to be image focused: a single square image is overlapped by a category name and short title. Controls are beneath, just as with the recent news list.
Recent news is still fairly spacious and keeps items to single lines, with a fade effect to the right to deal with long titles.
So far that’s about it. I’ve spent a fair amount of time designing a mobile version of the site, but it needs a bit more work. I should be posting about this and more changes to my MarketWatch concept soon.
Here’s my version of MarketWatch network bar and header as it exists today:
Simpler header for MarketWatch
Related Posts:
0user interface
Improving the User Interface and Experience of FanTogether, Part 1: Some Basics
Lately I’ve been working alongside a few former Strands Fitness guys on a cool, fun web app called Fan Together. Early stages for this project, but that’s what makes it exciting. I’m contributing by doing a bit of user interface design magic, tidying and improving, basically. I thought I’d share a little as we go.
My main goal for Fan Together is to make things easy to use for the audience and easy to build for our developers. I’m not designing too much in advance, mostly winging the changes so as not to overcommit. We’re interested in getting as much feedback as we can as early as we can.
I started with the profile form:
No style, really. Not much more than labels and fields. So I increased the size of the fonts and fields, set the labels to right align, and move a few things around.
Better.
I’m particularly satisfied with the direction of the avatar upload and the drop-down menus, customized via jQuery plugins I’m developing. Taking the opportunity to create a few cross browser solutions for these UI items that I’ve been wanting for a while, particularly for the drop-down menu and Internet Explorer.
However one problem would be a battle visually between an either short or long team list and the basic info options. Furthermore there were other items on the page that would in time make the view very long. I opted for a tabbed layout, with items like “My Teams” separated to their own areas.
At this point the layout has reached a reasonable state. Some fields now are only available when the information is not available via Facebook or Twitter, so there’s less to deal with overall. As a side note, I’m enjoying keeping the labels font-weight: normal except for those related to required fields.
I’ve not yet tweaked the layouts of the other tabs or views, so more on the evolution of Fan Together shortly!
Related Posts:
0change easier
on mobile
UI Pattern [Idea]: 3D Camera Position Control for Mobile Games
This is a possible solution for changing the “camera” position of 3D games on mobile touch screens when multi-finger gestures for rotation are not possible. In third person game views, this might make it easier to see areas around the on-screen player.
The key gesture is the press and hold of the left hand thumb. Once held, an element appears beneath to indicate that the user is holding and the game is ready for a perspective change. Pressing and dragging along the curve with the right hand rotates the screen. The perspective indicator’s arrow follows the right hand.
To change the z-axis perspective, the user wraps the first finger of their left hand around the top of the screen, enabling a up/down gesture of the right hand to modify the view.
It is entirely possible that the use of the left hand finger is unnecessary, but we’d need a working prototype to know one way or the other.
Related Posts:
0navigation
[Updated] UI Pattern [Idea]: iPhone App Breadcrumbs
For years, breadcrumbs have been a reliable method for retracing one’s steps or to get a sense of location on websites. So far I’ve not seen anything quite like that on mobile apps, so I thought I’d take a crack at working out how breadcrumbs might work in a touch environment.
Please note: This is a design experiment. I’ve not actually built this, yet.
Attributes and features of the iPhone breadcrumb UI element:
- Each items serves as a button back to its respective level.
- When breadcrumbs are too difficult to read, hold and zoom to magnify.
- Items evenly space where room is available.
- When space starts becoming tight, the right side of all but the last item is faded out.
- When space is too tight for words, only the arrows remain.
Original screenshots
Second generation
After a little time away from the designs, I realized there might be some benefit to keeping home and the last item always visible. Home also didn’t have to be text, an icon might do.
With Home icon and visible last item
Nth items
Related Posts:
2solution
UI Pattern [Idea]: Scrolling Filter for Mobile
I haven’t had a chance to try this out, yet, but I think this is a pretty solid solution for filtering content without having to open a menu in a popup. The most frequently accessed options are visible by default and within easy scrolling distance. Less frequently used options would be further to the left or right.
Related Posts:
0Experiment with Simple Inline Bar Charts – Now with Drop Shadows (jQuery Plugin)
In a meeting a few days ago, the subject of visual effects on data visualization came up (pause to accept just how nerdy that is).
My studies say that the more effected charts and graphs are, the harder they are to read. My colleague felt otherwise. I showed him my experiment for simple bar charts with jQuery. He preferred a stronger effect than I. He said he like a drop shadows on bar graphs. I think they’re an eye sore.
So I’ve updated the experiment (originally called “inline percentage scales“) so we can now play around with the level of drop shadowing.
Here’s the JavaScript for version 0.0.2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | /* jQuery measurement unit switcher by Weszt Hart */ (function ($) { $.fn.hd_percentage_graph = function (options) { var defaults = { bevel_opacity: 45, shadow_opacity: 45 }; var options = $.extend(defaults, options); return this.each(function () { $('.hd-percentage-scale').each(function () { var percentage = $(this).attr('rel'); var structure = "<div class='scale-container'><div class='scale'><div class='grad'></div></div><div class='bevel b-bottom'></div><div class='bevel b-left'></div><div class='bevel b-right'></div><div class='bevel b-top'></div></div><div class='dropshadow'><div class='main'></div><div class='top'></div><div class='left'></div></div>"; var bevelLevel = options.bevel_opacity / 100; var shadowLevel = options.shadow_opacity / 100; $(this).append(structure); // set the effect levels $('.bevel').css('opacity', bevelLevel); $('.grad').css('opacity', bevelLevel); $('.dropshadow').css('opacity', shadowLevel); // Let's scale up from the left $('.scale', this).css('width:0'); $('.scale', this).animate({ width: percentage }, 500, function () { // Animation complete. }); }); }); }; })(jQuery); |
Here’s the CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | /* ----------------------------------------------- Inline percentage scale an experiment by Weszt @ Hanami Design weszt@hanamidesign.com -----------------------------------------------*/ /* wrapper */ .hd-percentage-scale {display:inline-block;min-width:100px;position:relative;} .hd-percentage-scale .scale-container {background:#e8e8e8;height:18px;min-width:100px;margin:0 3px 4px 0;position:relative;z-index:5} .hd-percentage-scale .scale-container .scale {height:18px;width:0;position:relative;z-index:2} .hd-percentage-scale.positive .scale-container .scale {background:#5cbd52;} .hd-percentage-scale.negative .scale-container .scale {background:#ff4343;} .hd-percentage-scale.caution .scale-container .scale {background:#ffd800;} .hd-percentage-scale .scale-container .scale .grad {background:url(../../../images/hd-ps-grad.png) 0 0 repeat-x;height:18px;width:100%;} .hd-percentage-scale .scale-container .bevel {position:absolute;z-index:3;} .hd-percentage-scale .scale-container .bevel.b-top {background:#000;height:1px;left:1px;top:0px;right:1px;} .hd-percentage-scale .scale-container .bevel.b-left {background:#000;bottom:1px;left:0px;top:0px;width:1px;} .hd-percentage-scale .scale-container .bevel.b-right {background:#ededed;right:0px;top:0px;width:1px;} .hd-percentage-scale .scale-container .bevel.b-bottom {background:#ededed;height:1px;left:1px;bottom:0px;right:1px;} .hd-percentage-scale .dropshadow {bottom:0;left:0;position:absolute;right:0;top:0;z-index:4} .hd-percentage-scale .dropshadow .main, .hd-percentage-scale .dropshadow .top, .hd-percentage-scale .dropshadow .left {background-image:url(../../../images/hd-scale-dropshadow.png);background-repeat:no-repeat;position:absolute;} .hd-percentage-scale .dropshadow .main {background-position:100% 100%;bottom:0;left:6px;right:0;top:6px;} .hd-percentage-scale .dropshadow .top {background-position:100% 0;height:6px;right:0;top:0px;width:8px;} .hd-percentage-scale .dropshadow .left {background-position:0 100%;height:8px;left:0;bottom:0px;width:6px;} |
Related Posts:
0jQuery Inline Percent Scale Plugin
Today I played a bit with creating a jQuery plugin for generating inline percentage scales. I’ve made similar UI elements before, but there’s rarely been time to build-in any real flexibility.
This experiment is one part of a much larger project to design a banking/finance style user interface the way I think they should be done, Mint.com being my primary inspiration.
Mint.com is pretty enough, but I think styled past the point of being easy; they’re now making the data hard to read.
I’m starting from the inside out of by focusing on the percentage scale UI pattern. The beveling effect is adjustable; see for yourself by using the form on the experiment page.
The background is a lighter grey intentionally. I think only a light style on a percentage scale’s background is necessary. Its purpose is only to help visualize how much the colored bar above could be and is therefore submissive, assisting, secondary and could just as easily be excluded.
Width and height for the scale as a whole are not currently adjustable and I’m still sketching out what further options might be. Lots more I can do.
Here’s the JavaScript for version 0.0.1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | /* jQuery measurement unit switcher by Weszt Hart */ (function ($) { $.fn.hd_percentage_graph = function (options) { var defaults = { opacity: 45, }; var options = $.extend(defaults, options); return this.each(function () { $('.hd-percentage-scale').each(function (){ var percentage = $(this).attr('rel'); var structure = " "; var effectLevel = options.opacity /100; $(this).append(structure); $('.bevel').css('opacity',effectLevel); $('.grad').css('opacity',effectLevel); $('.scale',this).css('width:0'); $('.scale',this).animate({ width: percentage }, 500, function() { // Animation complete. }); }); }); }; })(jQuery); |
And the CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | /* ----------------------------------------------- Inline percentage scale an experiment by Weszt @ Hanami Design weszt@hanamidesign.com -----------------------------------------------*/ /* wrapper */ .hd-percentage-scale {background:#e8e8e8;display:inline-block;height:18px;min-width:100px;position:relative;} .hd-percentage-scale .scale {height:18px;width:0;position:relative;z-index:2} .hd-percentage-scale.positive .scale {background:#5cbd52;} .hd-percentage-scale.negative .scale {background:#ff4343;} .hd-percentage-scale.caution .scale {background:#ffd800;} .hd-percentage-scale .scale .grad {background:url(../../../images/hd-ps-grad.png) 0 0 repeat-x;height:18px;width:100%;} .hd-percentage-scale .bevel {position:absolute;z-index:3;} .hd-percentage-scale .bevel.b-top {background:#000;height:1px;left:1px;top:0px;right:1px;} .hd-percentage-scale .bevel.b-left {background:#000;bottom:1px;left:0px;top:0px;width:1px;} .hd-percentage-scale .bevel.b-right {background:#fff;right:0px;top:0px;width:1px;} .hd-percentage-scale .bevel.b-bottom {background:#fff;height:1px;left:1px;bottom:0px;right:1px;} .scale-table {float:left;width:auto} .scale-table tbody tr:nth-child(even) td {background:none} #percent-value {font-size:150%;text-align:right;width:60px} |
This is version 0.0.1 but as always, feedback is welcome.
Related Posts:
0for fields from
JSON file.
jQuery Inline Help Plugin with JSON
In this experiment, I’m playing with using a JSON file to dynamically creating inline help guides for form fields.
When the page loads, the JavaScript adds a slug for help text to anything with the class hd_inline_help. Next it loads and parses the JSON file. Once ready, it steps through the data and tries to match help text with IDs, adding where appropriate. When a user clicks a field, help guides are shown (if available).
Here’s the JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | // Hanami Design inline help experiment (function($){ $.fn.hd_inline_help_json = function(options) { var defaults = { fade: false, position: inline } var options = $.extend(defaults,options); return this.each(function(){ $('.hd_inline_help').each(function(){ var helpItem = "<span class='help'></span>"; $(this).after(helpItem); $(this).focus(function() { $(this).closest(".form-row").children(".help").fadeIn(); }) $(this).blur(function() { $(this).closest(".form-row").children(".help").fadeOut(); }) }); $.getJSON("js/inline-help.js",function(json) { $.each(json.fields, function(i,field){ $("#"+field.id).closest(".form-row").children(".help").append(field.val); console.log("#"+field.id); }); }); }) } })(jQuery); |
I’m interested in adding more default and positioning options, but you can see version 0.0.1 below.
Related Posts:
0Simple Evernote GTD Projects with Next Action Preview
This quick change makes it easy to keep your project list ordered by due date, sortable by area of responsibility, and ready for scanning next actions:
- Create a notebook called Projects
- Title each project note using this pattern: Year + Month + Day + Verb + Title
- Make sure Evernote is ordering Notes by Title
- Create tags for your areas of responsibility and apply them to your notes
- Put your next actions first in your project notes
- Activate snippet view
Evernote should now look something like this:
Just by going to your Projects notebook you can see:
- Which projects are due
- When the projects were started (day the note was created)
- What areas the projects fall under
- Which actions are next
Leave a comment or send one to me on Twitter.
Related Posts:
6Hanami Design
Weeks 30-31 Results & Experiments
Lean and mean is the theme for Week 31.
- Evernote as comprehensive organization and life tool [Inconclusive]
While Evernote could very well be the killer app for organizing one’s entire life, I’ve come to realize that I’ve been spending too much time organizing and not enough time doing. On hold, for now. - Evernote project template [Failure]
So much effort with so little reward. How many tasks could I have completed if I’d not have bothered? - Daily battle plan [Success]
One page plan for the day. Tasks are in a flexible order for when I think it’s best to do them. Makes keep on track so much easier and batch processing a cinch. - Date-first project note titles [Success]
For example: “2011-08-01 Write: Week 30-31 Results & Experiments”. Even if the dates are arbitrary, my project folder now prioritizes itself so what I need to be working on is always at the top. - Streamline my GTD system [In progress]
Taking a hard look at the waste in my system. What good is being organized if I’ve not saved myself time?
Have a productive week, everybody!
Related Posts:
5Hanami Design
Experiments and Results for Weeks 28, 29, and 30
Due to a few curveballs that life threw me recently, I’ve not had much of a chance to write. Therefore I’m summing up three week’s worth of experiments here, including those I’ve slated for this week, week #30.
- Evernote: Stacks for Areas [Success]
This was a silly little experiment that had me creating a notebook for each of my areas of focus and piling them into a stack. Wow. Deep thinking there. However seeing everything so nicely arranged like my areas in Things, I got thinking about how, with some discipline, I might be able to ween myself off of using two tools for basic task/project management and revisit using just Evernote. That led me to… - Evernote as comprehensive organization and life tool [In progress]
With my work now spanning several internet devices, I need tools that are available anywhere. All my email is online, why not my tasks? So I took the weekend to move all my projects and related actions into Evernote and I’ll soon post the results. So far, so good. - Evernote project template [In progress]
I posted a bit about this last week, but the experiment continues. I expect to tie updates about this along with my experiment on using Evernote as an all-in-one tool. - Working in more pushups and crunches into my day [Failure]
Not convenient to do push-ups just anywhere, so I’m considering this a failure. For now. - Add options for inline measurement unit switcher jQuery plugin [Success]
Things are shaping up – see for yourself! - Enhancing iTunes smart playlist like form [Pending]
Nothing new on this front. - Stealth usability feedback gathering [Abandoned]
Instead of stealth, we’ll be using surveys. Not really sure why I even included this one. - Writing my immediate next task – and only that task – on an index card [Success]
I keep this by my desk at work to remind me of what it is I’m supposed to be working on. Easy to jump away and this helps me get back in focus.
- Replace beer with white wine spritzers [Success]
I live in the Pacific Northwest where we love our beer hoppy and sometimes strong enough to make you stupid. However beer was overstaying its welcome around my mid section. While I still allow myself a pint or two when I’m out, I’ve replaced beer at home with white wine spritzers and the difference is noticeable: I’ve dropped a significant percentage of my belly fat in just a few weeks. This could be a permanent lifestyle change. - A daily battle plan [In progress]
Writing a to do list no longer seems enough. I’m now listing what I need to do in the order I feel is most optimal. Worked well over the weekend, but the real test is a work week.
Hopefully this week is more conducive to writing – we’ll see.
Related Posts:
0Results: Experiments with Using an Evernote Stack for Projects and Areas of Focus
The goal of this experiment was to see if using a stack of notebooks dedicated to my GTD Areas of Focus would work better than my hierarchy of tags. Each notebook would house my projects. My hope was that a set of notebooks would work better than tags because dragging and dropping would also mean sorting.
Admittedly not the most demanding thing I’ve ever tried productivity-wise, but I’m dedicated to weekly experiments and this was one I allotted for last week. Almost seemed too trivial to write about.
But in short, yes, this approach worked just fine – at least until I synced with the iPhone app. Stacks are not yet available there. I have read they are on the way so it might be worth sticking it out.
So I’ll keep toying with this for a while and will post an update if it the results warrant it.
Related Posts:
1[Updated] jQuery Plugin for Changing Measurement Units and Converting Values
This is the first major upgrade to the HD Unit Switcher jQuery plugin I’ve been developing for managing the changing of distance units such as meters and miles and temperature units such as Fahrenheit and Celsius. The plugin automatically adds a drop down, converts the value to the new type, and changes like measurements across the page (if there are any).
Now at version 0.1.3, the HD Unit Switcher includes:
- New support for meters
- Proper jQuery plugin structure
- Downloadable zip
- updateAll option
- Support for default measurements
- Better error capturing
Still to come is a bit of optimization, support for more units (feet, Kelvin, etc), and more style.
Related Posts:
1idea of who you
are designing for
UX Personas and Scenarios Spectrum Template (free)
While working on a lean UX project recently, my team needed a simple form for discussing, identifying, and organizing personas and their related scenarios. I developed a one-sheet template that’s worked out really well and thought I’d share a generic version as a Word document.
It’s purposely light, has room for at least four personas, and provides a row for scenarios (bottom). Modify it as you see fit and enjoy.
Related Posts:
0Hanami Design
Experiments for Week 28
New experiments for Week 28 (2011):
- Evernote: Stacks for Areas
Interested in creating a Stack in Evernote where each notebook is assigned to a GTD type Area of Focus/Responsibility. I’d then move all my Reference notes to an area they relate to. - Working in more pushups and crunches into my day
I often sneak in a few pushups during work, but now I’d like to ramp that up and add crunches. - Add options for inline measurement unit switcher jQuery plugin
The next evolutionary step for my budding jQuery plugin is to give it some options people can change. Which ones, I’m not yet sure about. - Enhancing iTunes smart playlist like form
Experiment duplicating a form in iTunes with CSS3 and jQuery. - Stealth usability feedback gathering
Need to find ways to get useful feedback without seeming like I’m asking. (UX)
Experiments I’m carrying over from Week 27:
- Print my lists: next actions and projects
See if I do more when tasks are on paper, not on screen - Sharper button edges
Need buttons with sharper edges. - Start my day with a coffee + meditation + brainstorming session
Head clearing, task capturing, mental fitness routine.
Have a great week, everybody!
Related Posts:
0Results: Experiments for Week 27
Lots of successful experiments during week 27. My focus was across the board: productivity, coding, mental fitness, etc. Here are the results:
- Announce new missions and experiments [Success]
This was pretty easy. Start the week posting what I plan to work on, work on it, then post results. Starting the second week now and it feels like something that might stick. - Start my day with a coffee + meditation + brainstorming session [Success]
Major success, actually. Thrilled with the benefits of starting my day by getting everything out, thinking through things I want to change, and drinking a little Java. My mind is clearer and I feel more relaxed and together. - Play with typography of math formulas with CSS [Success]
Created some pretty compelling solutions for displaying math in HTML without using images, but not sure yet if these solutions are as elegant as they could be.
Demo: Displaying Math/Equations with HTML and CSS. - Print my lists: next actions and projects [Success]
This worked out great. For some reason, paper lists seemed to want to be taken more seriously than digital. Perhaps because printing makes tasks tangible? - Sharper button edges [Failure]
I’m still getting fuzzy edges in Photoshop and what I want is perfection. Will turn to Illustrator next. - “Prototyping for Website Design” [Unknown]
I wasn’t able to work on this and my interest is now elsewhere.
In addition to these, I spent some time experimenting with using jQuery and CSS for inline measurement unit switching/recalculating and duplicating the look and functions of the iTunes smart playlist form.
I’ll be posting my planned experiments for Week 28 in a little while, but your suggestions and ideas are always welcome!