CSS progress dots
For a web-based on-boarding process that I am currently working on, I borrowed a UI element from mobile - the progress dots:
For clarity, the dots above communicate that the user is on the second of four pages.
Turns out this line of circles are really easy to create in CSS. In the HTML, I made an unordered list that contains four list items. The dot that is “ON” in the sequence contains a class, “dark.”
<ul id=”progress_circles”>
<li></li>
<li class=”dark”></li>
<li></li>
<li></li>
</ul>
I drew the dots with CSS by first specifying a height and width of 15px. Had I stopped here, I’d have four squares, so I had to add another rule that rounded the squares into circles: border-radius: 50%; Here’s the CSS for the entire thing:
#progress_circles {
position: absolute;
padding: 0;
margin: 0;
left: 456px;
bottom: 40px;
}
#progress_circles li{
list-style: none;
display: inline-block;
background: #ccc;
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 10px;
}
#progress_circles li.dark{
background: #6b6b6b;
}
Now you can either create four different pages of HTML for each screen in your process or you can use jQuery/Javascript to remove and add the class “dark” to the correct list item dot.
Paperdoll for the web
For those not familiar, paperdolls are figures cut out of paper that come with sets of paper clothing and accessories. The clothing can be attached to the dolls by folded rectangular tabs.
Over the weekend I took a scan of a cotton paperdoll and turned it into an interactive website that allows you to dress the paperdoll online:
http://ravenkeller.com/paperdoll.html
To make this, I first cut the paperdoll and her accessories out of a jpg scan and turned them into pngs. I then contained each png inside of a DOM element and enabled draggable functionality on them using jQuery UI.
Each DOM element is a div with a unique id and a shared class, “draggable.” Each id specifies a background png with coordinates for the location it will take when the page is first loaded or refreshed.
The shared class is used to specify “cursor: move” in the CSS. It is also used to enable dragability on all DOM elements containing the “draggable” class. Here’s how the jQuery looks:
<script>
$(function() {
$( “.draggable” ).draggable();
});
</script>
SO EASY!
Evolution of a Feature: Why Repeatables provides 5 Different Ways to Review Your Data
Repeatables is an iOS app that lets users collect and review data about their activities.
Repeatables lets you create a personal list of behaviors that you’d like to track - either binary activities like “went to the gym” or quantitative things like miles ran, hours slept, alcoholic drinks consumed - and then easily record these behaviors as you perform them.
The last piece is the review mode - and I want to explain how this feature evolved as we developed the app.
The first review mode that we built into the app is a chronological, time-stamped history of all the user’s activity:
We knew that we also wanted to show the data for each individual Repeatable, so we built out two additional views,
A chronological, time-stamped list for each Repeatable:
And a bar chart for each Repeatable, in which each occurrence of that item is marked by a single bar:
This was fantastic! It was exciting to know the very date and time I’d last been to the gym (easily forgettable) and to see the trends in my heavy carb intake.
But as we continued to test the app, we began to wish for other types of data visualization. When we accumulated a lot more data, would a daily bar chart really be my best option for reviewing all of that data? And regarding my gym-going, there were often holes in my bar chart for days when I didn’t work out - was a bar chart the best visualization for a binary activity?
Out of these questions we concluded two things:
1. Each visualization of the data reveals a specific type of information
2. Not every Repeatable benefits from the same type of visualization
To resolve these issues, we did a couple of things. First, we enabled landscape view for charts. Then, we made the charts interactive by using the iPhone’s multi-touch pinch gesture to expand and condense the bar charts. This allows the user to control the amount of information displayed on the screen - sometimes you care about seeing the numbers for last couple of days and other times you want to see longer term trends.
expanded landscape view (it’s been a slow week)
condensed landscape view (I drank a fair bit on my birthday)
As you can see from the bottom navigation bar in these screenshots, we also added a weekly bar chart view and a calendar view.
The weekly view is pretty straightforward - it summarizes your activity in 7-day chunks.
The bar charts are fantastic for reviewing quantitation information, like individual drinks of alcohol, servings of bread or single miles ran (add “ran 1 mile” as a Repeatable and tap thrice for 3 miles ran). You can see exactly how many fewer miles you ran this week versus last week or how many drinks you had this weekend versus two weekends ago.
The calendar view on the other hand is good for reviewing binary trends in your activities - that is, whether you did the activity or not.
Here’s a calendar view of my “Drank Alcohol” Repeatable for the month of February:
There are no obvious trends (like drinking more on the weekends), but I do see that I drank more towards the end of the month than I did at the beginning. It’s also just interesting to SEE how often I drink alcohol.
Another great use of the calendar view is for tracking monthly-occurring activities such as menstruation. Some of you might find the next visualization a bit gross, I find it incredibly useful.
Here’s a visualization of my menstrual cycle for the month of March:
I was surprised too - in hindsight I’ve always averaged my cycles at 4 days. My calendar from the month before revealed similar data. The upside is that Repeatables allowed me to trade in perception for fact - and to more accurately anticipate and report this information.
All five views - the global history review plus the four views for individual Repeatables - exist on the app that we released to the app store earlier this week. Each view communicates a specific type of information about a user’s data - the list provides chronology, the calendar visualizes actions performed or not performed, the bar chart by day reveals trends in a Repeatable and the weekly view reveals trends at a zoomed-out level.
Download Repeatables here:
http://itunes.apple.com/us/app/repeatables/id506522525?ls=1&mt=8
Please check it out, use it for a couple of weeks and then let me know what you think. I’d love to hear your feedback!
Dress Design #3
front
back
close-up of back
This is a dress that I made for a New Year’s Party. The top is made of a sheer fabric with velvety hearts and the colorful bottom fabric - although you can’t tell from the photo - is covered in a light reindeer pattern.
Dress Design #2
In January I had my mother ship this dress and a few other things from California.
I made this dress when I was about 16 and it was my first attempt at making a garment that buttons down.
Over the years I’ve made lots of variations on this fitted sleeveless top with pleated skirt design!
Dress Design #1
Throughout high school and college I designed and sewed a line on women’s clothing that I sold at boutique stores in mid-town Sacramento, near where I grew up.
These days I spend most of my time making things for the web and mobile, but every couple of weeks I like to set my computer aside and pull out my sewing machine. On Sunday I made this long silky black dress which I can wear over pants or leggings now and over a skirt in the summer time.
It’s a pretty simple floor-length baby-doll shape with double-folded hems and a short slit at the bottom (to allow for long NYC strides!).
#Sprites
I made these real quick for a friend’s blog redesign. They’re familiar and lovely in their simplicity.
I’ve been REALLY into grey recently. It’s such a flexible color.
