Mobile Interface Design

Since we’ve started studying developing web mobile apps in my Mobile Media class, I am increasingly reminded how design can lead to better implementation/functionality and vice versa. It’s way too easy to rush into programming and curse yourself at the half-way mark, saying, “If I’d sat down earlier and really thought about my application, I would never have designed it this way. ”  Too often at ITP, I feel like we’re in such a rush to program, we often forget to take some time to sketch, wireframe an idea, study the interaction to make sure its effective and clear before implementing. After doing some rough research on mobile app interfaces, I came across  Web Design Inspiration for the iPhone which shed some visual light on what works, etc. for this tiny screen platform.

Mobile Media Midterm: StreetSnaps

For my mobile media midterm, I choose to focus on developing my street photography site, StreetSnaps. StreetSnaps lets mobile users to snapshoot stylish people on the street, upload from their mobile phones or cameras, and see the results of what have been posted online. Peruse through different neighborhoods to see the different looks for each New York neighborhood listed.

Design: StreetSnaps sports two designs, one made specifically for web browsers and for iPhones/Android web-kit enabled browsers. The web interface takes advantage of horizontal scrolling to allow a photographic touch that lets users scroll as if viewing a camera roll. The mobile web interface utilizes JQTouch to create a “mobile-app feel” and utilizes vertical scrolling.

The PHP script in StreetSnaps will auto-detect whether the user is using an iPhone, iPod Touch, or Google Android  phone to forward them directly to my designed mobile site.

Street Snaps: Fashion on the Run

“I am fashion” – Coco Chanel

Street fashion, as self-photographed by stylish individualists,  is increasingly becoming the successor  to mainstream fashion media with individuals turning online for visual inspiration, rather then traditional fashion magazines. With an explosion of cheap consumer technology and free online publishing  platforms, people have the means to immediately share their fashionable observations in near real-time. A stylish democracy of sorts.

So far, this creative self-expression has been documented through online networks, street photographer sites, and personal blogs. See the examples below: LookBook, The Sartorialist, and Vogue’s TweetChic (which is more capturing thought of fashion insiders then their photos).

However, wouldn’t it be great to see documentation in real time with less effort (ie., no need to plug your camera and upload?) – something as easy as whipping out your cellphone and capturing a shot on the street? Living in New York, I see fashion as divided by different neighborhood tribes – East Village, SoHo, Brooklyn, Upper East Side, Harlem, Meatpacking District, etc.

Plans: Explore MMS, extracting caption data and, perhaps, geo-location data, and extend Street Snaps so it can be subdivided by neighborhood so people can peek at New York’s unique styles. Adapt the SnapStyle website so that it can be easily viewable in a mobile webviewer, which would be great when after people submit their snapshots, they can then view it on their smartphones.

So far, from the documentation I’ve been reading, Apple doesn’t include EXIF data when photos are snapped with 3rd party iPhone apps but there appears to be some workarounds. That’s going to be an area of exploration.

Execution: Explore photo submission process, so users can be filtered by neighborhood (EXIF data?) or by self-captioning their location? How can we provide easier to find, readble caption information? Currently, I use the <title> tag within the <img> tag so when the cursor hovers, the caption data is seen there. I will have to explore Webkit and JQTouch.

Shawn’s Advice: ”Come up with a midterm project idea, talk with potential collaborators. Document and describe the idea on your blog and prepare to discuss it in class next week. Your documentation/description should include what the idea is, why you want to do it and a diagram of how it will work (wireframes, napkin drawings, etc..). “

MMS : Street Snaps

Street Snaps is an MMS service where users can submit their fashion or street photos via cellphones/smartphones through MMS and see it live on my website. Snap your shot, MMS it to cindyw.itp@gmail.com, and see it uploaded to Street Snaps.

Behind the scenes: This MMS service is being powered by a PHP script provided by Prof. Shawn Van Every where my MySQL database is collecting all submitted MMS and logging it. I’m outputting all my photo submissions via my PHP website here (seen above). I’ve used the meta-tag <title>  to encase the MMS info to serve as a pop-up caption (Caption, Time Stamp). Ideally, I’d like to filter out the photo results based on certain keywords in the MMS message. Otherwise, I think this is a handy resource for people who want a micro-photoblog or even as informational as a missing-persons database. Food for thought.

SMS: ITP Geek Pick Up Line Generator

Castlevania Heart by Loserkid5150

In the spirit of Valentine’s Day, I decided to create an SMS service that would help socially awkward nerds find other socially awkward nerds: ITP NYU Geek Pick Up Line Generator. Using TextMarks, I created an account and keyword that would trigger my  PHP script that prints out  a randomized funny (or terribly corny) line that nerds (may) relate to one another. I tried for some variety after using this as my source of witticisms.  Whether you’re a math geek, gamer geek, or coder geek, I hope you can enjoy this. How does it work? Text 41411 to NYUITP Geek and have fun with the response back! Who knows, maybe you’ll find a good ice breaker at your next social meetup.

Add on: I’m also flexing my n00b MySQL skills and created a table so I can log the frequency of people trying out this service for metric purposes. Privacy will be preserved since I’m only using this as an educational exercise. My original idea, Free Food Notification system @ ITP, didn’t have enough data to populate it as I was searching for free food deals in the NYU area and couldn’t find a consistent, up-to-date source. Looks like, it may be a work in progress for later.

SMS Applications Helpful to ITP

First Assignment: Describe an SMS based application that would be helpful to have at ITP

Grad students are notorious for a few things : a) time-deprived b) being financially iffy and c) starved. So, what better text messaging based service that we, at ITP can cook up then (hear me out without laughing): Free Food SMS Alert System.  Think about it. The NYU area offers a slew of free  eating options whether its faculty meet-and-greets, study breaks, food marketing stunts, etc. Currently, students only know about these opportunities via word-of-mouth or through their friends network. You might be on Twitter, you might not be, but if you opt to receive the Free Food SMS Alert System, you’ll only be notified when FREE FOOD is present.

Implementation: The person providing the info would need to answer a few brief questions so the SMS service can output the Who, What, Where, How so students can seek out the food source. User interface to provide information is undecided but would optimally be either through the web browser or through SMS interface. Mmm…

Advantages: Timeliness: Faster to receive then a Twitter message, SMS messages can route to students in questionable cell-coverage areas (elevators). Accessibility: SMS is available for non-smartphone owning students. Only students who opt for the service get notified.