Shop Shark 0.6

Finally got version 0.6 done for Shop Shark. In this installment, I’ve added the ability to keep a list of stores as well as a list of items. It’s actually not too big a deal — the store list behaves just like the item list does, and there’s no interactivity between the two. YET. The real idea behind Shop Shark is to help you plan shopping trips, so at least getting the stores in there sets me up to add some of the key features in the next few releases.

Tagged , , | Leave a comment

UX Myths

Here’s a nice, ongoing list of user experience myths, along with notes about the research that debunks them. I especially like “Stock photos improve the users’ experience” (users ignore irrelevant imagery), “People don’t scroll” (scrolling comes naturally to modern Web users), and “People read on the web” (they skim for clues on what to spend their time with).

Tagged , , | Leave a comment

The Wired iPad App

Apparently, the new Wired Magazine iPad application is 500 megs because every visual element is just an image. That is, all the text, the animation, even the progress bars for the audio files are images or a series of images. Interface Lab is right to ask why they didn’t build this with HTML5?

Tagged , , | Leave a comment

Shop Shark 1.0 Wireframes

Shop Shark WireframeHere are some wireframes I made to envision the Shopping Trip functionality I want to be in Shop Shark 1.0. The two main changes from today’s interface are that a) there will be a list of stores to visit in addition to a list of items to buy and b) when adding a store or an item, you will see a filterable list of past items and stores.

Aside from needing a visual on the interface, I also made these as an opportunity to give Google Doc’s new Visio replacement a try. It’s pretty easy to use, pretty functional, and pretty promising for future use. For now, it’s still a little green.

Tagged , , , | Leave a comment

Mouse Events and Touch Events, Mouse Enter

I ran into a little snag with my last batch of Shop Shark changes. If you try the application in your computer’s browser, using a mouse, you can select multiple items by holding your mouse button down in the checkbox of one item and dragging through the checkboxes of other items. It works just like the visibility buttons on layers in Photoshop, which is a feature I much enjoy.

Unfortunately, if you try the application in your iPhone’s browser, you won’t find the same functionality. You’ll still be able to select many items by tapping on checkbox after checkbox, but you can’t do it in one sweep. Which I finally decided was good enough for now.

The reason is the difference between mouse events and touch events. The iPhone uses a whole new set of events that let you take advantage of the touch screen interface, which is very cool. It seems they left a few things out, though. In this particular instance, it’s the mouseenter event. On a mouse-driven browser, Shop Shark listens for the mouseenter event on every checkbox and then checks to see if the mouse button is down. If it is, Shop Shark knows to either check or uncheck the box in question. But there isn’t a “touchenter” event. There is a touchmove event, which I tried to use to duplicate the functionality. The issue there is that the event doesn’t contain any information about which element it’s over when it’s moving, but only which element it began with.

So I finally decided it wasn’t worth the headache for now. In the future, I might try to rig up a way to find the element the touch event is moving through by referencing the x and the y, but that’ll have to wait.

Tagged , , , | 1 Comment

Shop Shark 0.5

Shop Shark 0.5I’ve updated Shop Shark to version 0.5. It is now much prettier than it was before, incorporating a new palette: Cyan, Magenta, Yellow, and Purple. No new functionality, but the slickness quotient should’ve gotten a big bump.

The user-friendliness may have taken a slight step back, however, as I’ve replaced the text labels on the action buttons with icons. I’ll have to address this problem in the future. One idea I have is flash the name of the action you selected right after you do something. Or perhaps show the message as soon as you touch the button and fade it out after you let go, executing the action. That way, you’ll have a chance to move out of the button to cancel the object. Basically, the iPhone equivalent of a tooltip.

Tagged , , , , | Leave a comment

Classic Iconography

Check out a collection of images of the Xerox Star, which boasted one of the earliest, best versions of the GUI metaphor we still use.

Leave a comment

Visual Tricks Can Make Downloads Seem Quicker

Not only are progress bars nice communication to users, they also make downloads seem faster. Turns out that some animation on the progress bar can enhance this effect.

They found that, on average, a 5.61-second rippling progress bar appeared to take the same amount of time as a 5-second standard bar, and a 16.75-second-long rippling bar seemed to take as long as a 15-second-long standard bar – illusory speeding-up effects of 10.9 per cent and 10.4 per cent respectively.

Tagged , , , | Leave a comment

More About iPhone Web Apps — Now With Startup Screens

Six Revisions has a great new article about building native-app-like web apps for the iPhone. Most of the information was familiar to me from prior research, but I did learn a very cool new thing.

You can define a startup screen for your web application. This is huge because it mitigates the sluggish feeling you get when you start your web app see it as a non-responsive cached version while you wait for it to load. Now you feel like the app has already responded to you and it’s just getting things together (which is actually what’s happening).

My most current development version of Shop Shark uses this feature. You can check that out here: http://shopshark-dev.softwerewolf.com

Tagged , , | Leave a comment

HTML/CSS Development Tools

Here are a couple or 3 tools for HTML & CSS that I’ve recently found useful:

ColorTools.net — A selection of simple, no-nonsense web tools for selecting colors. I was brought there by the “Combine Color” tool which just mixes two colors together and gives you the hex value for the result.

HTML Formatter — Just paste some random, unreadable HTML code into the textarea, click “format”, and get some highly readable code returned.

Brosho — Ok, this is very nice. It’s a jQuery plugin that you include in any page you wish, and it places a CSS editor on the page. Then you can finetune your design in the browser a la Firebug. And when you’re done, it spits out the CSS you created.

Tagged , , | Leave a comment