Showing posts with label UI. Show all posts
Showing posts with label UI. Show all posts

Friday, December 12, 2008

Some Interesting BBall

Tonight, as I have done regularly for about the past 23 years, I attended a Hawkeye basketball game. It happened to be the Iowa State game which always adds a bit of excitement, the crowd was the best I have seen in a few years, and Iowa happened to play a great game and pretty much had their way with the 'clones. Follow that up with the traditional playing of "In Heaven There is No Beer" and all in all - a most excellent experience.

It turns out I also got a nice little celebrity sighting out of the deal. Ashton Kutcher, being an Iowa native and former U of I attendee (I actually had 2 Engineering classes with him the sole year he was there as an engineering student), came back to the state to do some benefit work to provide money for flood recovery. Both he and Shawn Johnson (Olympic gold and silver medalist from Des Moines for those not paying attention) had events throughout the week to help raise money, which I think is very cool of both of them.

Ashton and his wife, Demi Moore, both sat at the scorers table about 10 rows in front of our seats along with Shawn Johnson. I was impressed that along with the good they were doing this week, they did not simply show up for the game, make their appearance, and then duck out. They all stayed well past the final buzzer, and generally seemed to be into the game and all of the events. My craptastic cell phone pictures aren't worth posting, or I would add them here.

There was a screening for Ashton's new movie, Personal Effects, at the Englert theatre in Iowa City tonight as well. I'm not so sure about the movie - it may have had a bit too much pandering to the Iowa fans for even me to stomach, but I'll probably check it out as a rental at some point.

Wednesday, December 26, 2007

Super-cool web goodness

I always like when I run across some new web technology (no, I won't call it web 2.0). I'm still amazed daily at some of the stuff people can pull off. It's especially great when it does something very useful, in a very intuitive and clean way, and then a bonus when it is applied as a fairly old technology.

Lifehacker pointed me today to a site that allows you to take fully-interactive snapshots of any website. By snapshot, I mean it is literally as if you snagged a piece of the site verbatim. The throwback part is that it possible to create it as an image map, not just an actual graphic. All hyperlinks and images, as well as layout, are completely retained.

Obviously, there are some copyright issues to consider here. This is substantially different than just linking to a page. However, if you own the content, this is awesome. Here's a snapshot from this blog to show as an example:



I was initially just going to add this to my Google Reader shared items, but decided it was just too good and needed to be posted. However, I thought I would throw in here how much I am digging Google's new feature that shows your friend's shared items right in reader. It lets me basically have a feed of things I probably wouldn't run across, and they are from people who have mostly similar interests to my own. A very nice addition.

Monday, November 26, 2007

The Future is Simple

(Click here to go straight to the webapp creation details)
(Click here to grab the template webapp file)

Web-based applications are all the rage currently (if you haven't heard, you're either under a rock or better at avoiding hype than I). Creating a functional application that makes use of HTML for a UI makes a lot of sense, and can greatly speed up development.

An idea based upon this that has intrigued me recently is the idea of SSB (site-specific browsers), and specifically Mozilla's Prism application/framework. A site-specific browser has also been called a distraction-free browser. The idea is to take the presentation aspects of a web browser, but remove all other associated web-browser nuances/distractions (i.e. toolbars, navigation controls, etc.). Basically you end up with the equivalent of a single, desktop application that still uses a web browser underneath.

I finally found the answer for how I would try this out while trying to solve a separate problem. My son (currently 7 years old) has been using email off and on for about 3 years now. I started him out with Gmail, but initially had him use a POP3 client. However, after moving the rest of the family to solely use the web interface I wanted to remove the installed client. This left me with 2 options:
  1. Teach him how to open a link to Gmail, logout the current user, and type his username and password.
  2. Find a way to give him his own access to the web browser interface that didn't interfere with anyone else in the family.
The first option was not a possibility. This was both too much work, and potentially too disruptive to other Gmail users in the household. So, I had to determine the best option for #2. After briefly considering having him use IE (since none of us use it), I regained my senses and realized that Prism could be the perfect solution for him.

5 minutes of learning how to create a Prism configuration file, followed by about a minute with "view page source" to figure out how to directly log him into Gmail, and I was ready to go. Now, couple that with a slick Gmail icon from one of my favorite free icon sites, zip it all up into a "webapp" file, and I was done. I ran it once to install into Prism, and then used the "Install Shortcut" option in the bottom, right-hand corner of Prism to install it to the desktop for him. It turned out very slick overall. I might yet make use of some of the scripting and styling features of Prism to automatically resize the window to a given size (currently it remembers between sessions just fine though), and remove some of the unnecessary UI elements from Gmail for him. For now though, this solves the problem very nicely.

One final tip. I wanted to host the template webapp file for all of this someplace permanent so that I could link to it. It turns out that Google Groups fit the bill very nicely for me, up to a 100 MB limit. Unfortunately, Firefox doesn't handle .webapp (or maybe it is the zip file format) very well so I can't directly link to the file. You'll have to right-click and save it.


Now, for the implementation details.
  1. Create a file named webapp.ini, mine looks like this
    [Parameters]
    id=gmail@localhost
    uri=https://www.google.com/accounts/ServiceLoginAuth?
    service=mail&Email=YOUR_GMAIL_LOGIN&
    Passwd=YOUR_GMAIL_PASSSWORD&continue=
    https://mail.google.com/mail?ui=html&zy=l
    status=no
    location=no
    sidebar=no
    navigation=no
    icon=gmail
  2. Find an icon file (in this case it would need to be named gmail.ico, but you could modify the "icon=" line if named something different. The "icon=" line can be removed entirely to use the default Prism icon.

  3. Zip up the .ico and .ini files with your zip program of choice (I use 7zip). Once you have created the archive, change it from a .zip extension to a .webapp extension to have it automatically load with prism upon double-click.

  4. Double-click the webapp to load it in Prism.

  5. <optional>Verify that everything is working correctly, and then drop-down the gear icon in the lower-right and select where to create a shortcut.

Finally, here is a template webapp file you can customize to do this yourself. All that needs to be changed is to open the webapp file up in your zip program (again, 7zip for me), and edit the webapp.ini file. The only things that will need to be changed are the YOUR_GMAIL_LOGIN and YOUR_GMAIL_PASSWORD values (to your Gmail email prefix and password respectively).

One last note. I needed this to work on a Windows PC, so the instructions are very much tailored for that. There shouldn't be any reason this won't work on Linux or Mac though.

Saturday, November 24, 2007

UI Consistency

Ryan had a post about "Inconsistent Time Sliders", specifically with regards to Apple software products. I had enough thoughts on it that it eventually just turned into a post of its own.

First, I think that Ryan notices UI components more than is healthy for the average human being.

This is actually a good thing though, and it usually Apple is the company who takes care of this. Is diversifying their product line taking its toll? Are they losing attention to small details such as this? Not sure.

I really don't think there needs to be more than perhaps 2 types of sliders. Shouldn't we be able to figure out pretty quickly if circles, triangles, or squares are the best marker? In reality, how does pushing a triangle or square down a round tube make sense? Stick with the round markers.

Given that we know the marker, I think the only thing that might change is dependent on whether transparency is allowed or not -- Ryan mentions this as well.

In general, these are the type of thing that get overlooked, and in the grand scheme of things
won't really hurt a product. Conversely though, paying some attention to these details can lead to a highly coherent and strongly-branded product (that which Apple has done the best at in recent years). Also, as Ryan mentions, usability can be greatly increased even with new products if a consistent UI is presented.

It takes a strong attention to detail, and some time commitment from a company to address these issues. However, overall it is one of the most cost-effective ways to increase marketability and sales of product.

In my opinion, the cover flow (and perhaps the new DVD player) slider is the best. I like a very unobtrusive slider that only shows when I need it, with the rounded slider. Buttons can be reduced to three, the play/pause, and a previous and next. Anything else is auxiliary and be hidden behind a click or menu, or perhaps available in a separate interface.