Ajax, Context, and the Color Red

diwant's picture

We have published the findings of comparing hundreds of sites with the experiences of our own users. Not in a whitepaper, not in an essay, but in a new interface of PoP Project itself. Here is what we did.

Projects are the Context
Our idea of context was to keep each page for a single action. Hence we had a separate page, or 'tab', for each part of a project. A separate page for each of the plan, conversation, team, and document store. While users found this easy to digest in each specific part of the project, the context of the entirety of the project was lost. You don't converse without keeping the plan in front of you. You don't plan without seeing the conversation and the documents as you plan.

So we adopted a new idea of context. Context is the project and everything else serves this context. We moved the plan, conversation, documents, and team to one page, and even kept the context of the child project / parent project relationship. Different ideas on what to present, the same zeal in presenting that well.

Websites are Ajax Applications
Five years ago, websites were separate pages. Every action was served by a different page. AJAX, and specifically Gmail challenged and changed this idea for us. Every click does not need to load a new page. Loading a new page kills a location context. (Location context is a term I just invented to mean the idea of where you are in a navigational space. Let me know if a better term already exists). Although the web is simply ones and zeros, people reading websites all have a location context while navigating. The bread crumb was the catch-all for restoring the reader's location context by reminding them where they were in a hierarchy of pages.

Before continuing, consider cellphones. The older Samsung and Sonys were like these web pages that use bread crumbs. Even the Blackberry of today has this problem. When I click a menu item, the new application that opens just shows up. I know what happened, and I intended it to, but I lose the location context because there is no transition. I may intend to enter a room but if I teleport inside, my goal has been reached and intention served, but I have to regather where I am regardless of those facts. The same problem happened with these phones and with those websites. Then the iPhone introduced fades and scaling and a very responsive and location context sensitive interface. I think that is why the iPhone took off. So I took that lesson and applied it to PoP Project.

Now the new interface heavily uses AJAX to maintain location context as best as possible. We have scales, fades, etc. as well as some important fixes. An example is that now adding an entry to the project conversation is done entirely via AJAX so when adding a comment, the page is not reloaded, yet the new comment is still fetched from the server and displayed on that page. It feels very cohesive, does not interrupt any discussion being hosted by PoP Project, and the location context is saved.

Red, White, and Black
Our strong belief that colors used should be minimal has had us playing around with different color schemes. A few months of meditation has lead us to the following scheme which we are trying on the new interface. White backgrund, black text, and red to attract the eye. We believe it presents very well, but we would love to hear from you.

Do you like the new look?

What are your thoughts on location context?

How are you using PoP Project?

Comments

UPDATE: Eyes burned, Lessons

diwant's picture

UPDATE: Eyes burned, Lessons Learned.

The red burned people's eyes and they let us know . As a side, that is what I like about the people that use PoP Project: they let us know when we are doing something wrong. This is very valuable for any product to have and we thank you all.

So we were told that the red was too red, and we listened. And we learned that red may look nice as a highlight, but it cannot be used very heavily. It starts to burn the reader's eyes and it takes away from the use of the site. So we have softened up our look to a cool gray with red highlights where needed. No more eye burning for our valued users!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options