Shop Shark 1.0 Wireframes

May 17th, 2010

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

April 29th, 2010

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

April 20th, 2010

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

April 16th, 2010

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

April 9th, 2010

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

April 4th, 2010

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

March 25th, 2010

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

Randomness & Cleverness

March 23rd, 2010


Here’s a fascinating article from Underware about designing a font to look handmade. It includes a lot of information about choosing when to use different glyphs.

Tagged , , | Leave a comment

Introducing Mapper

March 20th, 2010

Screenshot of MapperMapper is a nod to my nerdity. It’s what my friends and I use for our battle maps while playing D&D over Google Wave. It’s an incredibly simple Wave gadget — the digital equivalent of moving pennies and nickels around on a piece of graph paper. But it works, and really the only thing I feel is missing is a way to draw in walls and other large obstacles. If you’re in need of a simple way to move colored boxes around in Google Wave, this will serve you well.

Here is the source: http://svn.softwerewolf.com/mapper
Here is the url for the gadget: http://mapper.softwerewolf.com/mapper.xml

Tagged , , | Leave a comment

The Issues of iPhone Web Apps

March 17th, 2010

My approach with Shop Shark was inspired by Google’s iPhone-friendly version of Buzz. With Buzz, Wave, and Voice, Google has taken to making iPhone-friendly web apps rather than native iPhone apps. I decided to follow their lead and have been working on Shop Shark as a web page that’s optimized for Mobile Safari and can be launched in the iPhone’s full-screen mode via a cute little icon.

I’m very intrigued by the idea that you can do almost everything you’d ever want to do in an iPhone app without having to make an actual iPhone app. It’s enough to lead one to think that iPhone developers are stupid for not having taken more advantage of what you can do in Mobile Safari. Of course, they’re not stupid, and it turns out there are some significant road blocks to making truly appy web-apps for the iPhone.

The first problem I ran into was fixed positioning. It doesn’t work in Mobile Safari. This eliminates the most obvious way of locking an interface element into place while the content scrolls. That kind of thing is used in pretty much every iPhone app ever (the ever-present bottom control bar), so that’s pretty annoying. In fact, it was a key part of the interface I designed, and on my laptop, the page worked beautifully. As it turns out, there is a work-around, but I decided not to use it. While I was researching this issue, I had a little epiphany.

Did I really need to make my iPhone web app behave like an iPhone native app would? What benefits would really come from going out of my way to make a web app act like a native app? What if I made some strategic compromises and came up with something different but just as good? I decided to rethink my interface without fixed positioning, and it actually turned out fine. It’s definitely not as slick, but maybe it’s good to have to give up being slick. Check it out here.

The next issue was load times. The problem that kills mobile Google Wave is how slow it is. When I posted a version of my application on the web and bookmarked it with the full-screen mode enabled, it was also very slow to load. Especially when compared with how long it took to load from within Mobile Safari (before I bookmarked it). I’ve created a little experiment, a very simple page that I posted in two versions: one that launches in the browser and one that launches full-screen. If you visit those 2 pages and bookmark both of them, you can notice the difference in how quickly they load.

I suspected that this difference had something to do with how these pages were being cached. Even reloading the in-browser version was much faster, but maybe it was still able to rely on the cache in a way that the full-screen version couldn’t. So I found this article about caching on the iPhone, and learned some interesting stuff. Nothing that helps me with my full-screen question, but stuff that brings up other issues I need to deal with. Like jQuery, which originally loomed large in Shop Shark. This is a problem because Mobile Safari will only cache files that are 25k or smaller. jQuery is 75k. Hmmm… The answer was to switch libraries. Now I use Paul Armstrong’s Base JS, which is like jQuery, but much smaller. This has made Shop Shark a little faster, but I’m still not really satisfied.

And that’s where it stands for now. The next step is to look into writing a manifest file. I also want to explore some progressive loading that could cut the initial wait and then load other stuff behind the scenes. For the time-being though, I think need to take a break from thinking about iPhones.

Tagged , , , , , | 1 Comment