GirlieMac!

Archive for the ‘UI/UX’

iPhone App – MuniApp for San Francisco Muni riders!

August 08, 2009 By: admin Category: App, GirlieMac! News, UI/UX, iPhone, iPod 3 Comments →

Ta-da, finally there’s an app for that! – I mean an iPhone native app that I involved is available on App Store!

This app is called, MuniApp, and this gives you access to San Francisco’s MUNI transit system on the go with real time predictions for buses, metro and cable cars.

I have worked on some UI and icons, while my friend Alberto has coded all the Obj.C. We are both SF residents and rely on MUNI pretty frequently and we do use this app on daily basis. Honestly, this is really simple and useful app :-)

The official website for MuniApp is at www.obapp.com/muniapp

To directly go to App Store on iTunes, go to this link!

Mobile Firefox UI

February 16, 2008 By: admin Category: Design, UI/UX No Comments →


I just noticed the 2nd proposal for Mobile Firefox UI was posted, (dated Feb.8).

This screenshot is for touch-screens, by looking at its dimension (240×320), it is almost obviously made for iPhone.

Buttons are overlaid at bottom and by tapping it activates URL bars and more options, including refresh and bookmark.

Personally, I think they need to redo the icon designs. This can look much nicer.

Source: Mozilla Links

Adding a WebClip Bookmark Icon for iPhone and iPod

January 18, 2008 By: admin Category: Dev, UI/UX, iPhone No Comments →

While MacWorld is held here in San Francisco, I am commuting to Sunnyvale… At least I am trying to catch up with all these exiting news from Apple.

One iPhone dev-related announcement caught my attention is a WebClip. -The WebClip is a web bookmark icon that is displayed on start screen on iPhone (and iPod), and looks just like an application launch button. (To make it work, you need to upgrade the firmware to 1.1.3.)

To create a custom icon is as easy as adding a favicon.ico for desktop website.

First, create a 57×57 png image. (Don’t worry about round-corners and shine.)

Then do either:

1) Place a PNG image named apple-touch-icon.png at the root directory of your web server.

or

2) Add <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.

Once added to the springboard screen, round-corners and glassy overlay will be added to your icon nicely :)

Usability Guidelines for Mobile Web

October 08, 2007 By: admin Category: Design, UI/UX, WAP No Comments →

WebCredible has this great article about usability on mobile web, 7 usability guidelines for websites on mobile devices. With actual examples and screenshots, pros and cons of each are explained nicely and clearly.

The seven guidelines are:

  1. Meet user’s needs quickly
  2. Don’t repeat the navigation on the every page
  3. Clearly distinguish selected items
  4. Make user input as easy as possible
  5. Only show essential information
  6. Place basic browsing control
  7. Design mobile-friendly layouts

Do they seem to be common-sense to you?
Yeah, but trust me, creating mobile web pages following the guidelines is not as easy as it appears to be. Mobile web is not just a dumb-down version of its desktop web sites, as some of you may think. Mobile web has whole new purposes!

By the way, I am glad to see Yahoo!’s oneSearch is used as an example for the “meet users’ needs”. We’re working really hard to provide the best mobile experiences to you!!!