Friday, December 2, 2011

Interfaces: Identify Me...

I wanna introduce something I'd like to review and possibly discuss as a common topic on my blog. User Interfaces! Ya' know, the translator for EVERYTHING you do that requires you to communicate with a computer system. It may seem out of context at first using the word translator to describe how we interact with computer systems. But, we do tell them what to do....and they do talk back to us, even when we hit the "cancel" button a zillion times. Your display acts like the window, you type in fields, click on icons to open/close programs, talk in the microphone, swipe the touch pad...All easy stuff to you and I, the users.

But,
Not so much for web developers, software programmers and engineers, game developers and anyone else that looks at codes all day long.


Like this picture here...
















I would not want upload a picture to facebook if I had to look through a bunch of THIS....just to add it.

<!DOCTYPE html>
<html lang="en" id="facebook" class="no_js">
<head><meta charset="utf-8" /><script>window.Env = window.Env || {};(function(v) { for (var k in v) { window.Env[k] = v[k]; } })({"user":"1379750098","locale":"en_US","method":"GET","ps_limit":5,"ps_ratio":4,"svn_rev":479734,"vip":"66.220.146.75","static_base":"http:\/\/static.ak.fbcdn.net\/","www_base":"http:\/\/www.facebook.com\/","rep_lag":2,"post_form_id":"8faa4eca8b34dbf5154fc215548fec54","fb_dtsg":"AQDlRF2T","ajaxpipe_token":"AXhBb_bQa6hTgGbl","lhsh":"aAQGmmupC","tracking_domain":"http:\/\/pixel.facebook.com","retry_ajax_on_network_error":"1","ajaxpipe_enabled":"1"});</script><script>CavalryLogger=false;window._incorporate_fragment = true;window._script_path = "\/home.php";window._EagleEyeSeed="xUzq";</script><noscript> <meta http-equiv="refresh" content="0; URL=/?_fb_noscript=1" /> </noscript>
<meta name="robots" content="noodp, noydir" /><meta name="description" content=" Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet." /><link rel="alternate" media="handheld" href="http://www.facebook.com/" />
<link type="text/css" rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v1/yt/r/XUz__kpqMvH.css" />
<link type="text/css" rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v1/yx/r/ejJoiNmHkkP.css" />
<link type="text/css" rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/v1/yi/r/5PJKEUNv9AO.css" />

<script type="text/javascript" src="http://static.ak.fbcdn.net/rsrc.php/v1/yX/r/HN0ehA1zox_.js"></script>
<script>window.Bootloader && Bootloader.done(["M4\/yw"]);</script><title>Facebook</title><link rel="shortcut icon" href="http://static.ak.fbcdn.net/rsrc.php/yi/r/q9U99v3_saj.ico" /><noscript><meta http-equiv="X-Frame-Options" content="deny" /></noscript><style>.sidebarMode #chatFriendsOnline,.sidebarMode #fbDockChatBuddylistNub.fbNub,.sidebarMode #fbChatErrorNub{display:none}
.sidebarMode #pageHead,.sidebarMode #globalContainer{left:-90px;position:relative}
.sidebarMode .liquid #globalContainer{margin:0 90px}
.sidebarMode .fbDockWrapper{right:175px}
.sidebarMode body.safari4 .fixedScrolling,.sidebarMode .safari4.fixedBody #leftCol,.sidebarMode .safari4.fixedBody .MessagingReadHeader,.sidebarMode .safari4.fixedBody .MessagingContentHeaderWrapper,.sidebarMode .safari4.fixedBody .fbProfilePlacesHeader{margin-left:-90px}
.sidebarMode body.canvas_fixed.safari4 .fixedAux{margin-left:-91px}
.sidebarMode .safari4.fixedBody .fbStreamStickyHeader{margin-left:-110px}
.sidebarMode .timelineLayout .fbTimelineSideColumn{margin-right:-400px}
.sidebarMode .fbTimelineSideAds,.sidebarMode .fbTimelineScrubber{margin-right:-400px}
.sidebarMode .fbTimelineStickyHeader{right:310px}
.sidebarMode #fbPhotoTheater .container{margin-left:-570px}
</style><script>!function(a){if(a.clientWidth>1225)a.className=a.className+' sidebarMode ticker';}(document.documentElement);
!function(){var a,b=function(){a=a||document.getElementById('blueBarHolder');if(a&&'getBoundingClientRect' in a){var c=a.getBoundingClientRect(),d=Math.round(c.top)-

That's maybe the 1st 40 or so lines of code used to display the news feed page on Facebook
and it's even going renegade by going off the screen...

Thank God for that "upload pictures" button! So I personally thank developers and programmers for everything they do everyday, it makes me want to do it!!

User Interface is a broad topic. I'll be focusing on Mobile User Interfaces and Applications. Guess why!?Right now, I work for the largest cellphone company in the USA, Verizon Wireless. I do Technical Support on cellphones, pda's, crackberries, tablets, modems.....oh yeah....voice calling service too. I spend 40hrs a week helping people use their mobile devices. Setting up emails, refreshing a data connections, performing master resets, educating on the use of the product, sneaking in the tricks and tweaks of a phone to make the experience easier. It's also allowed me to gain a great deal of knowledge on how people use their mobile devices in their daily lives. What they hate, what they love, what's important to them, and what's not important to them (coughcoughpreinstalledappscoughcough).

I am all about customizing your phone or mobile device the way you want it to be. I'm no control freak, but if I want to see a little android guy pissing on the Apple logo as my bootup animation....let me freakin do it.  My first dive into customizing the look or theme of my phone started with the Samsung Omnia, a windows mobile phone. I had fun messing around in the registry and changing .cab files. Then Android OS came along and that blew everything out of proportion for me. I started designing themes, layouts, icons, changing my font, and lots of other things I'm sure i'll discuss. It's all led me on this path to want to design mobile user interfaces, hence why I'm back in school for graphic design. I can get very technical with people, especially when it comes to cellphones, there is alot involved with mobile devices. I want to help make the technical and "behind the scenes" prowess of a mobile devices easy for people to use and make it look %$#&'ing good.  I want to learn, share and possibly give pointers about the good, the bad, and yes....the ugly on mobile user interface.

Here's an example of future posts...


So of course I'm going to talk about Verizon's mobile website first. I'm not going to review the whole site or interface. I'm just going to exploit a really cool feature I found the other day that I think is perfect for a cellphone company to implement

That's right. When I went to Verizon's mobile site on my android phone looking for a case, it knew exactly what phone I had. I didn't have to keep looking through drop down lists to select my model, or heaven forbid even type it in.....while parked....of course ;). To be fair, I did check out AT&T's website...






+1 Big Red
                                                  -1 Others











I want my cellphone and a website to interact with each other seamlessly to make it easier to do what I'm doing on that website. The same goes for apps,honestly in my opinion, web apps and HTML5 is the way to go....start shredding the binds of the OS.





1 comment:

  1. Nice post. I'm just sorry I hadn't read this earlier. Let's make sure we connect more often regarding our professional lives - since I do the same as you, only with people using desktops and the web. And I'm all for making websites easier for people to use.
    Love ya Ray,

    ReplyDelete