Monday, April 29, 2013

Possible iOS 7 Color Palette

Apple recently sent out the new logo for WWDC 2013 (Worldwide Developer's Conference) and, well, it's colorful.

Now, if you know anything about Apple events, you probably know Apple likes to vaguely hint at coming surprises with what they send to press.  So, what could they be hiding in the new logo?  Well, I have three ideas:

  1. Obviously, the move to a much, much thinner typeface.  This is actually Helvetica Neue Pro UltraLight rather than the iOS mainstay Helvetica.  (Yes, there's difference, heh).  This obviously leads one to believe they're moving to the more "flat UI" that Google and Microsoft have transitioned to.  (Tall, thin fonts are a part of Swiss Metro and Holo design).  Thank God they are hopefully doing this because iOS has been seeming mighty stale, recently.
  2. Next, the rounded rectangles seem to be in an odd stack-like formation.  This could be one of three things; a new folder system, apps that are less sandboxed (they're "merging"), or a new wiggle-related animation?  Well, I think it connects to the first option because this seems to be an image promoting the possibly new UI.  So, I think this is what a folder will look like on iOS 7; a bunch of semi-translucent papers stacked on top of each other in a chaotic but ordered way.
  3. Finally, and most importantly, I think Apple showed us the new color palette for iOS 7!  Look at those bold, over-saturated, and beautiful colors!  Those have to correlate to iOS's new "texture-less UI," right?
With number 3 in mind, I decided to create a color palette for iOS 7 based on this logo:

Pretty colors, no?
Sadly, I didn't stop there.  I decided to try and mock up what iOS 7 could look like with app icons that were flat and used these colors.  Please note that I am not an artist; the following will be very rough and I apologize for possibly hurting your eyes.  Also, this isn't what I'm proposing iOS 7 will look like, just what the current iOS would look like using the app icons, fonts, and folders hinted at by the WWDC logo.  Without further ado:

Safari's icon is "rough'n stuff'n robots..."
Personally, I like the look.  If Apple were to go with there flat icons, I imagine they'll look something like the above solely because they can't change too much without scaring away their massive user base.  For example, if they were to actually use the design and colors provided, I can't imagine the Phone icon looking that different from the one I created.

So, I just thought I would make a quick post about the WWDC logo in the time I should be studying for my finals.  Any thoughts? Any disagreements?  I'd love to hear about them in the comments!  Want to tell me how much iOS suxz?  Well, I'd love to hear your comments, too!  Just send them to /dev/null and I'll read them at my earliest convenience! 

Sunday, April 21, 2013

How To: Replacing the iPhone 5's Back Glass

About two weeks ago, I dropped my iPhone 5 on the sidewalk and somehow ended up cracking both of the glass panes on the back of my iPhone 5.  (Seriously, how does that happen)?  The next day, I called Apple because I was sure it wouldn't cost an abhorrant amount of money to replace two tiny pieces of glass.  Well, as you may have guessed, I was wrong.  Apple wanted ~$250 to fix my iPhone 5 or it was out of warranty.  (Let me just say that after doing all of this work and knowing Apple wouldn't replace the glass but the whole back frame of the iPhone, this makes a tiny bit of sense).  Anyways, I Google'd how to replace it and there weren't any answers or tutorials, so I set out on my own to fix an obscure part of the iPhone's parts list!  So, without further ado, here's how to replace the iPhone 5's top and bottom back glass.

The Parts List!

I purchased many things from eBay and Amazon but these aren't recommendations for these sellers, they're more of suggestions.

  • This iPhone-opening kit. It included two prying tools, a small pentalobe screwdriver, a small philips screwdriver, a guitar pick, and a suction cup.  All of these were needed for the operation!
  • Replacement OEM back glass.
  • This adhesive.  This will be used to secure the glass to the frame.  I used an xacto knife to cut the pieces.
  • This heat gun.  Used to loosen adhesive.  Also, it's totally awesome to have a heat gun.

So, total bill of materials: about $36.  For those doing the math at home, yes $36 < $250.

The Process

Now, I'm not going to step you through taking the iPhone 5 apart, but I will link you to iFixit's amazing guide and discuss my thoughts on the process.  Also, please note that this isn't for beginners and should only be attempted by those who know what they're doing!  I assume no responsibility for your broken device and all that jazz.

Step 23A: disconnect the cable on the bottom left!
So, start the process and deal with separating the screen from the frame (it will take awhile, you will get frustrated).  Continue through to step 12 where I think I should mention that the commenter is wrong about disconnecting the battery; it does NOT ruin the battery.  Everything will be fine once it's reconnected!  Also, I noticed that using the guitar pick to slide under the battery to sever the adhesive worked wonders!  Now, proceed until step 24 and then STOP.  One commenter was correct in pointing out that iFixIt forgot a step here; you need to disconnect the cable that connects the the logic board above the right speaker!  They already pealed it back in their photo of Step 23 so just emulate what they did.  Finally, continue until step 30 and then halt.

From here, there are two things that need to be done.  One is (if your device is like mine) you need to remove the flash diffuser.  Mine looked like a tiny reflective box over the camera flash's location on the back.  Remove it and the plastic flash from the glass.  Next, use the top of a plastic tool to gently push out on the camera lens; the lens cover should pop off so you should put it in a safe place.  

From here, we have everything we need to fix the glass!  So, get out a large piece of paper (or some form of catch-all surface) and put it beneath your iPhone.  Next, plug in the heat gun and let it get ready for a second.  Also, grab a heat-proof glove of some sort (I used an oven mitten)!  Now, hold the frame with the mit and turn the heat gun on (I used the High setting because I'm daring) and run it over the top piece of glass.  I held it about 2 inches away and went back and forth over the whole piece for about 45 seconds.  Now, turn it off, set it up right, and then grab your screw driver.  From the inside of the iPhone, you should see some small holes where the glass is located.  Push out on these with the screwdriver and the glass should eventually give out.  NOTE:  It will crack.  It will shatter.  It will make a mess.  Always remember to wear gloves and protective eyewear!

Once the hole in the frame is clear of glass, turn to the removed pane.  You should see a plastic black frame connected to the camera lens hole and one connected to the flash hole.  Remove them and set them aside.  Now, repeat this process with the bottom piece of glass!

Once done, you should take the adhesive and cut out small strips that you think would firmly secure the new glass and attach them to the panes.  Once reseated, turn the device around and find the camera area.  Put the plastic frames you recovered from the pane and put them in the inside of the frame.  Finally, you're free to reassemble your device!  Oh, you should put the glass lens protector back in through the back of the phone and it should just stay.  Now that that's done, you have a fully working iPhone 5 and your warranty in tact for only $36!  Take that, corporate America! :)

Tuesday, April 16, 2013

Usage Analysis: Tumblr


So, about a month ago, I decided to create a Tumblr.  (Note: I'm not sharing my personal "blog;" sorry).  While many people have used the social network for the last few years, I never quite "got it."  Though, in my quest to stay current and understand why people are using certain services, I set out on creating a profile.  The following are my beliefs on why the website is so popular and why users return to it.  Also, please note that this is more of an analysis on why users return to the site, not an analysis on what's wrong with the design or what makes the site special.

Finding #1:  This Isn't a "Normal" Social Network

One of the first things I learned about Tumblr was that it's not like Facebook, Google+, or Twitter in that it's a "social network" mostly for strangers.  I'm not trying to impress my friends, family, or coworkers; I'm trying to connect with others on a global scale.  This small difference has several large impacts on the site's users.  For one, I was no longer attached to my own life!  I was no longer defined as "that guy who played percussion" or "that guy who moved to Oregon to work with Intel;" I could be anyone I wanted to be.  My identity was reset and I was allowed to create an Internet personality based solely on my interests or others' interests that I thought were interesting.  In my opinion, this is a huge benefit that Facebook, et. all can't replicate; the users are free to be whoever and whatever they want to be in real life.  Examples of this include gay high schoolers who are finally able to express their inner-selves in some public facet or people without money "reblogging" high-end fashion despite it being out of their price range.  People love talking about themselves and now they love showing their true (and to some extent ideal) selves.

Finding #2:  Tumblr: The Fountain of Content

Companies need to learn how to engage their users to keep their userbase.  People obviously don't repeatedly return to websites they find boring.  So what makes Tumblr so "addictive?"  There are three highly-addictive reward systems that are extremely powerful.  The first is the user's "Dashboard."  Thanks in part to Finding #1, the Dashboard should be filled with content tailored directly towards you.  I would describe it as a mixture of Facebook's News Feed, Reddit's homepage, and crack.  Due to most posts being images or text, scrolling through a dozen posts on the Dashboard takes seconds.  It's a constantly replenished source of content that you know you'll enjoy.  The Dashboard also has infinite scrolling enabled so users aren't jarred back to reality after X amount of posts.  These two facts make Tumblr extremely addicting to visit.  Though, Tumblr isn't just about visiting; it's about sharing.

Finding #3: Followers! Followers! Followers! 

The second reward system on Tumblr is the amount of "followers" one has.  It's an odd form of social validation; if you get a new follower, you feel like they "like" you.  Due to this, the user seemingly tries to be more interactive on the site in hopes of impressing them and convincing others to follow their blog.  This near-instant validation leads to users getting caught in a cycle; to get another follower you have to interact more which leads to more followers which leads to more interaction, and so on, and so on.  As an aside, Tumblr did something remarkably intelligent; they made your follower count private.  This reminds me of a decision Facebook made years ago regarding wall posts.  If I remember correctly, due to fears of people comparing wall post counts and feeling inadequate, Facebook removed the number from their site.  Tumblr, on the other hand, has made their follower count private which means no one feels bad about their count and they have a gauge on how "popular" or "liked" they are.

Finally, the third reward system is likes and reblogs.  This is very similar to the second reward system, but it shows you not only how many people like your content, but what they like.  This allows the user to tailor their blog to hone in on what they know will be "popular" amongst followers.

Conclusion: There Are Many Things Others Can Learn From Tumblr

After my first month on Tumblr, I can see what other companies should learn from this site.  I've listed these thoughts below and I hope to hear about others' opinions on the subject! 
  1. Put the users first and get out of the way.  No one wants to use your service; they want to express themselves or help their lives and the less they have to deal with you the better.
  2. Gone are the days of static content.  Today, the user needs to be able to determine your site's content and should be able to perfectly tailor it to their identity.  
  3. If users are allowed to fully express who they are on the inside, you most likely have a disruptive product.
  4. Implement rewards systems that are less about arbitrary "scores" (Klout) and more about sociability and validating the user's identity.
  5. People are becoming more private and weary about posting their lives online.  Allow users to remain public yet private!  Tumblr allows people to blog about their lives or remain 100% anonymous.  This freedom allows the platform to be used in various ways without hurting the either experience.  For example, a user could use a Tumblr to blog about color palettes or they could use it to upload photos of their daily lives.  Either way, the platform supports both degrees of privacy.
  6. Implementing infinite scrolling is dangerously addictive and you should always use it.  Always.

Monday, February 18, 2013

On Tablet-Based Office Apps and Why They're Hard to Make

Note: I know I never finished my series on cracking Reddit's CAPTCHA; I'll finish that soon!

Note 2: If these gestures are implemented into an app, I would really like to be notified, credited, or at least contacted.  Taking one's ideas and then selling them as your own for $50 is a really inconsiderate and greedy thing to do, and frankly, I would never want to work with you.

Introduction to the Market

So we are at an interesting point in the technology sector right now; we're seeing tablet sales soar and the traditional desktop/laptop market shrink.  Many argue this might lead to the "demise" of PCs or that people are just buying tablets as "secondary devices," but this isn't what I want to talk about.  Far too many people get caught up in hypothetical analytics in where the market's going rather than discuss where they could take the market.  That's what I'm going to talk about today.

Recently, Forrester surveyed almost 10,000 Fortune 500 employees on their tablet usage.  Of the respondents, 32% said they desire to use a Windows 8 tablet at work, 26% said iPad, and a mere 12% listed Android.  Once again, I'm not here to discuss what OS people hypothetically want; I'm here to think deeper about this.  These hypothetical numbers are interesting but the real news comes in the form of the distribution of people currently using tablets in the workplace and how many want to.  Only 21% of these workers said they use a tablet as a work device but 17% said they don't have a desire to use them.  That implies that 83% of Fortune 500 employees want to use tablets in their daily workflow!  So, why hasn't this panned out for them?  I blame the lack of excellent Office-esque applications!

The Issue With Document-Based Apps

Making a word processing app is hard.  It's not hard in the traditional sense of development; it's hard because there are so many features and tablet UI's call for simplicity.  How is it possible to make a clean, touch-based UI if you have to add buttons for tables, fonts, insertions, spell check, file operations, different views, citations, and much more?  This is the question that has puzzled developers and designers for the last few years but that doesn't mean people haven't tried to fix it.

Enter Apple with Apple Pages.  It's a very attractive app that offers many powerful features, but it's mainly a desktop application.  Notice that the UI elements are tiny which means users have to hunt for certain buttons and aim precisely which is a paradigm that's only useful for a cursor.  If people were typing a paragraph and then had to bold a word, the workflow would be:

Type > Look up > Hold finger over certain word > Hit "Select" > Find Bold button > Press it

As you can imagine, this is a terrible experience for people who just want to pump out documents quickly.  If your workflow has to involve the user hunting, aiming, and moving their arm around a 9 inch screen, then you're obviously not doing it correctly.

Next, we should look at Microsoft's attempt: Office 2013.  Office 2013 is an interesting beast because it attempts to  add Metro- err- the New Windows UI design to the entire suite of tools while still retaining all of the functionality users know and love.  How exactly did Microsoft tailor Office for touch screens, then?  Well, they really didn't.

As you can see, the UI elements in the app are legitimately the same (or nearly the same) as a desktop application.  They've altered the fonts and spacing to be more "tablet-friendly" but that's really the only differences that shine through.  While the Ribbon UI supposedly works well (I have my gripes but that doesn't belong in the scope of this post), it doesn't actually translate well to a finger-based input system.  To insert a photo, the user would have to lift their head to the top bar, hunt for the "INSERT" header, tap it with immense precision (it's just one word...), hunt for the now-visible "Photo" button and finally tap it.  Once again, this is not an ideal workflow; it's time-consuming and ultimately confusing.

So, after looking at these apps created by these computer juggernauts, I hope you could see why tablets aren't popular for document creation.  Beyond the UI of the apps, there's the notion that users will presumably carry around an external keyboard rather than using the on-screen keyboard which is a problem in and of itself.  So, what can we do about this?

Anyone Can Point Out an Issue; The Greats Propose Solutions

Gestures!  Say it with me: gestures!  Y'know, there's something to be said about the two biggest proponents for gestures not implementing them into their word processing apps.  (Apple pushed two-finger scrolling, pinch to zoom, swipes, etc. and Microsoft's Windows 8 is basically all gesture-based).

In the modern age of application design, gesture-based input is the holy grail of UI implementation.  If done correctly (ex: pinch-to-zoom), the gestures will feel intuitive and easy to understand.  Though, if done incorrectly (ex: Google dividing the status bar in Android into two invisible sections that respond differently upon a swipe down), the user might be confused and annoyed when trying to do them.  This leads the user to dislike the UI and, most tragically, not use a certain feature or app entirely. Knowing this, it's extremely important to "get it right" so the UI is intuitive enough for the user to understand the gestures and be quick enough that the user's workflow is fluid.

Now, I don't have all of the solutions; heck, I don't even have a tenth.  Though, I do have ideas on how the UI should work!  Here are some of my ideas and a few mockups/examples:

Text Input
Obviously, the on-screen keyboard will have to be used.  This is fine to a certain extent, but it can be vastly improved.  Going off iOS, the workflow of selecting text is a mess.  The user types what they want but then have to move their finger to where they want, press-and-hold over the word they want, release, wait for the pop up, hit select, and then finally move the second cursor over the scope of their selection.  We can do better.

Looking at an iOS jailbreak tweak named SwipeSelection, it's easy to see how simple text selection could be.  To move the cursor, the user just swipes left or right on the keyboard.  It just works.  Now, my proposal to improve this would be to include a better way to select text.  One finger swipe moves the cursor but two fingers could be used for both cursors.  So, the user finds where they want to move the cursor to with their right hand and then they use their left index finger to move the (now-visible) left-hand cursor.  This turns the workflow of text selection to the user types, swipes their right index finger on the keyboard (essentially not moving far), and then the left index finger swipes left or right.  That saves a lot of time and is pretty intuitive!  Now that that's worked out, lets move on to what one does after selecting text.

Font Operations
Once the text is selected, there are only a finite amount of operations the user would like to do.  These include font size alterations, font color, bold/underline/italicize/strikethrough, highlight, make a link, and delete.  The delete function is obvious here, but let's try and tackle the other features.

To solve the font color operation, we rely on a simple press-and-hold gesture on the typing area after selecting text.  This would then bring up a color wheel around the finger where they user can just swipe over the color they'd like (a la Android Jelly Bean's unlock gesture).  I've created a quick mockup (please ignore the absence of "selected text") which you can see here.  This turns a hunt-and-aim workflow into a simple tap-and-hold followed by a swipe.  It really couldn't be simpler, in my opinion.

Great, now let's work on font size.  This is simple and intuitive; once the text is selected, the user should be able to pinch in or out on the text area (like above) and the font would be altered based on that.  I don't really think I need to go into too much explanation here.

Next, we should try to create a quick and intuitive way to implement bold/underline/strikethrough.  This is tricky because these operations have never manifested themselves as more than just a group of buttons.  So, going with the paradigm we've created above, we could devote the left screen to a similar gesture as font color. This means tapping and holding the right side of the text area would yield the color ring whereas the left-hand side would yield another ring; the attribute ring.  (Name can obviously be improved).  It's the same concept, just with less intuitive options which yield an initial minor hunting game.  Theoretically, this ring could also hold the hyperlink and highlighting operations.  Since these two rings are extremely similar, it's easy to see that users could grasp one easily which would improve their chances of grasping the other!

Menu Systems
The next challenge is the menu system.  As seen in Office 2013, compartmentalizing the location of similar operations is extremely useful!  Though, Microsoft seemed to use the desktop system of menu selection and even used a form of Ribbon UI, which is found in Explorer and older versions of Office.  Basically, they didn't do much in the way of tablet-izing their menus.  Here's how we can change that.

Suppose there was a menubar-typed line of text similar to how Microsoft does it (I really like the capitalized categories).  This bar would have compartmentalized categories based on types of operations; file operations, text edit operations, insertion operations, table operations, etc.  The bar would be located above the keyboard (or alternatively on the top but that would make the user move their hands more).  This would look like this:

Now, here's the interesting part; you don't just click on the label you want and have new options appear somewhere (Ribbon UI...), the menu is gesture-based!  The user could press-and-hold on a certain menu item and a list of options would expand upwards and downwards.  Also, the faint blue glow would appear on the bar where the operation was selected.  Now, the user just moves their finger up or down which would cycle through the list until the option they wanted was in the blue center.  Once done, they release their finger to select said operation.  I know this is slightly confusing to read, so take a look at this:

 Once the user opens the secondary menu, they slide their finger downwards to move "Photo" into the blue area and then they release their finger.

From a usability standpoint, I believe this is great!  If you think about it, the selection box (the blue area) would read "INSERT" and then "PHOTO."  This is perfect for easily explaining what exactly is occurring.  Also, it would be a quick gesture that everyone knows (press-and-hold and slide up or down).  On top that, the entire menu could be customizable so the user could move the categories into the position they'd like so the UI would be less hunting-based and more based on personal preferences. All in all, this would reduce the workflow from "move hand to top of screen, look for category, click category, look for option, move hand, click option" to "look for category, press-and-hold category, slide finger up, release finger."  Much better, IMO.


There are so many other things that need to be implemented but I hope I successfully demonstrated how gestures can be used in-place of standard desktop UI widgets.  I really hope word processing tablet apps improve over time because there's a HUGE market for business apps; we just need people creative enough to fill that gap!