July 2013 – RandyHook

So I’m working on the Charity Tree project again, which I began chronicling in this post, and am picking up where I left off, with user interface design.

I’ve recently come across a fantastic UI prototyping tool called Indigo Studio and am absolutely loving it. I encourage you to try it out. The screenshots in this post were created with this tool, and there are actually interactions wired up as well that you would see if you were viewing them from within the software.

If you’ve read my previous articles in this series, you will remember that one of my main goals is to keep the interface as simple as possible. Matching donors with clients has always been by sticking point, and I think I’ve finally nailed it. As you will see below, there are no more concepts of combination client/donor screens. You simply pick the entity you want to work with, then go search for a match. I think this approach has really simplified things.

So let’s walk through the current state of the UI prototype and I’ll commentate a little on some of the functionality.

Program Manager’s Dashboard

This is the screen that the program manager, my term for the overall person in charge of running the charity program, would see after logging in. My goal here is provide an at-a-glance view of the current state of the program.

Client Listing

The listing screens are probably the most uninteresting of the lot, but again, I created a screen that allows you to quickly get where you need to go without a billion options. Let’s click one of the “Gorton” rows.

Client Detail

Here we are looking at a client application that has been submitted, including multiple family members. The lower portion of the screen is divided with the general client application data on the left and the family member data on the right. Both sections are scrollable.

The client application can be reviewed here, and it can be approved or rejected by clicking the status next to Application.

Finding a Donor

Let’s find a donor for this client. You can see on the right-side of the screen that we can find a donor for all of the family members at one time, by clicking “Find a donor for all waiting members of this family”, or find a donor for just one of the family members by clicking “Find a donor” beneath the desired member. Let’s click the “all waiting members” link.

We are brought to the donor listing screen and notice at the top how the app is now expecting you to locate a donor for the Gorton family. Let’s select the Sycamore Gathering organization. You can see that they would like to donate to 40 families, but only 4 have been assigned so far. Clicking them brings us to the donor detail screen.

You can see we still have the message at the top of the screen telling us that we are still in “match” mode. Also, on the right side of the screen you can see we have the option of matching the Gorton family to this donor. If we forgot some of the details of the Gorton family, we can click the “view details” link at the top of the page.

So let’s say we are satisfied with our selections and make the match by clicking on the “Match to Gorton” link.

Notice the notification of the successful match at the top of the screen and the increase in the match total at the right of the screen.

Conclusion

I’ve detailed out several other button clicks and a few other screen state changes but we’ll stop for now as I think you’ve probably got the idea of how this app is going to work. If you’d like to view all of the screens, you can download the zip file here.

CharityTree UI Mockups

If you have Indigo Studio, you can download my project file and check out all of the screens so far and some of the screen interactions.

CharityTree_IndigoStudio

So I’m pretty excited about the direction this is taking and I’m feeling good about starting to cut some code. More on that later!

Articles in this series:

Introduction
What’s the Big Idea?
From Idea to Implementation – Brainstorm
From Idea to Implementation – Sketches
From Idea to Implementation – Sketches – Part 2
Interface First
Interface First – Part 2

The Problem

I had been using a jQuery plugin to automatically scroll an element to the top of a container with success for quite a while. Then I changed my markup and the .ScrollTo() function began having strangely; specifically, scrolling my entire page to the top of the window then refusing to respond to further .ScrollTo() calls. After an hour of trying to figure out why and then trying an alternative plugin with the same results, I decided to try and see if I could just quick write what I needed.

It turned out to be surprisingly easy — actually only two lines of code — one if you really want to compact it further.

The Layout

The simple markup we are looking at is a container full of elements that we want to scroll to by clicking various buttons. So let’s say we have a container full of header-paragraph pairs representing short descriptions of planets in the solar system (content taken from wikipedia). We have a toolbar of buttons with the planet labels, and by clicking them, we want to scroll to the appropriate header. The markup would look something like this:

<div id="planets"> <div id="mercury" class="button">Mercury</div> <div id="venus" class="button">Venus</div> <div id="earth" class="button">Earth</div> </div> <div id="content"> <div id="planetWrapper"</div> <h2 id="content_mercury">Mercury</h2> <p> Mercury is the smallest and closest to the Sun of the eight planets in the Solar System, with an orbital period of about 88 Earth days. </p> <h2 id="content_venus">Venus</h2> <p> Venus is the second planet from the Sun, orbiting it every 224.7 Earth days. </p> <h2 id="content_earth">Earth</h2> <p> Earth is the third planet from the Sun, and the densest and fifth-largest of the eight planets in the Solar System. </p> </div> </div>

The CSS

There’s only a couple of key elements that need to be in place:

The content element, being the “outer container” needs its position set to relative and its overflow-y property set to hidden
The planetWrapper element needs its position property set to absolute

The Scroll

I won’t go into all the details here of reacting to the click events and such in jQuery. What I want to show you is the code that scrolls the planetWrapper to the correct element. Let’s call our function scrollToPlanet and it will accept one parameter, which is the planet’s H2 to scroll to. Therefore:

function scrollToPlanet(planetHeader) { currentPos = $(planetHeader).position().top; $(planetWrapper).animate({ top: -(currentPos) }, 1000); }

All we are doing here is noting the current position of the planet header we want to scroll to, then animating the entire planetWrapper element such that its top position moves up a negative amount equal to the header’s position. This effectively dispalys the header at the top of the container.

Month: July 2013

Charity Tree – Interface First – Part 2