Archive for January, 2010
SixthSense – Mobile Interactin in the Physical World
Jan 30th
Pranav Ministry: The Thrilling Potential of Sixth Sense Technology
Sorry it’s a link, I tried to embed it but I failed. This is truly fantastic. Capabilities are going to be endless.
52 weeks of UX
Jan 28th
Whether you need a refresher in topics around UX or just want to get a your head into the space of what does User Experience really mean. Follow the 52 weeks of UX. See weekly discussion from a user experience designers Joshua Porter and Joshua Brewer.
Occasionally I look for sites that either preach to the choir or simply inspire.
Should be a good read for those who are new to the field of interaction design. So far the basics are being covered.
http://52weeksofux.com/
The Cult of [M]Apple
Jan 28th
Check out this episode of The Simpsons which takes a nice stab at “The cult of Apple” kind of like what we talked about today.
Steve Jobs… or his likeness does one of his famed keynotes as the dictator, or leader of the cult.
“Mapple”, “myPods”, “myPhones”
Watch it before the link dries up.
Interesting Take on the new iPad
Jan 27th
How Will the Apple Tablet iPad Change Our Kids’ Lives?
Read More http://www.wired.com/geekdad/2010/01/how-will-the-apple-tablet-change-our-kids-lives/#ixzz0druEMY0O
The whole idea of the iPhone and iPod Touch being used by kids and even toddlers has always fascinated me. Now that Apple brings along the iPad definitely seems right up kids’ alleys.
Welcome the iPad to the world of Mobile Interaction Design.
Jan 27th
I still don’t know what I think about this guy…
http://www.apple.com/ipad/
GOOD – Imagining Augmented Reality
Jan 26th
This article and video is about the future of augmented reality and what can be good about it. It’s from a GOOD magazine resource:
www.good.is/post/imagining-augmented-reality//r:t
Noshi: Community driven finding + knowing service
Jan 26th
Matt Muñoz, the co-founder of New Kind in Raleigh and recent graduate of the NC State MGD program, posted the presentation for a mobile app proposal (created in 2007).
I don’t know what I don’t know. This core idea propelled the creation of a mobile mapping application and service ecology. I sought to design a finding service that enables a mobile user to leverage community driven knowledge in service of new information and experiences. Note: this project was created before the iPhone was actually released.
Animation Types
Jan 25th
Here’s the different ways or techniques of animation that we worked on in class. 5 minutes each.
Independent Study – Initial Concept Map
Jan 25th
I have begun to do some preliminary research for my independent study which coincides with designing a mobile application in this class. I have posted a first draft concept map of mobile apps, mainly touching the simple aspect of the different types of apps, what is popular, where they are used, their limitations as well as who uses them. So far I only have basic categorizing for each one, but I plan to further break down the users, limitations and other broader facets of mobile applications.
FirstButtons
Jan 23rd
Here is some process work from our first button tutorials. We were working on how to create and code buttons using EventListeners and the such.
Google’s Smartphone Move
Jan 22nd
Posted at Frog Design
By Adam Richardson – January 5, 2010
Why Google had to take control of Android with Nexus One
Google’s introduction of Nexus One, a phone to truly call its own, is a completely necessary move for the company. Only by taking ownership of the whole user experience will Google really be able to prove the value of its Android platform.
Nexus means a series of things connected together, an appropriate name for a phone where Google is taking more control of both the hardware and software, and therefore much more of the user experience.
We are at interesting inflection point with smartphones, a point where we have two competing development models playing out and a future in which probably only one will survive: Highly integrated, or highly modular.
With a few exceptions (BlackBerrys and to a lesser extent Treos), until recently most smartphones have been modular affairs: hardware from one company, OS and software from another company, wireless network from yet another. This has led to disjointed user experiences that have limted the appeal of the phones to more mass market audiences. The success of the iPhone with mass consumers showed that it was vital to integrate all these elements together seamlessly (and that integration goes beyond the phone itself to content on the PC and in the cloud).
In the early stages of a category such as smartphones, the usage experience is often rough and incomplete. Early adopters will look past this, but until a more refined experience arrives that delivers the right recipe of capabilities, ease of use, and price, then the majority of people will stay away. I refer to this as an experience gap – a mismatch between what people want to do with a product, and what the products on the market can actually deliver.
Once the recipe has been established, and clarity reached about what people want, it then becomes easier to divide up pieces of the experience to different vendors, as they now all have a common goal in mind. Following Clayton Christensen’s logic, once this happens then modular approaches will ultimately win out – they will be more technologically sophisticated, cost less, and offer more capabilities. The PC is the archetypal example of this process. Smartphones are coming up on this inflection point, though the timing of when it will tip into full-blown modular-hood is unclear. Smartphones could be like mp3 players, where the similarly integrated ecosystem of iPod/iTunes has resisted being broken into components by competitors.
Google’s leaders are excellent students of tech history, and they no doubt understand this trend. When Android premiered it was, as Christensen would say, “prematurely modular”, in that it was a system that had a very high degree of modularity and very little structure, but it was too early for other vendors building on the Android platform to know how to put together an effective recipe for user experience.
Charlie Wolf at Needham Company roundly criticizes Google for its overly loose approach to Android:
The great appeal and promise of Android is that it’s an open source operating system in the tradition of the Linux operating system. The appeal of open source lies in the freedom of software developers, smartphone manufacturers and wireless carriers to modify the source code of the operating system. And, as initial versions of Android phones demonstrate, the smartphone vendors have every incentive to do so in order to differentiate their phones from others running on the Android platform. For example, Motorola sells it customized user interface as “MotoBlur” while HTC markets its user interface as “Sense.”
Unfortunately, the freedom of smartphone manufacturers to modify the Android code has created significant hurdles for application software developers. Unlike the iPhone where a software application can be written once and run seamlessly on all versions of the iPhone [Not exactly true - AR], most software applications written for Android have to be customized for each smartphone. This limits the addressable market of an application to that of an individual smartphone rather than the Android platform itself.
(Download the PDF of Wolf’s report here)
The lackluster success of the early Android phones has surely made Google realize that they need to take a much stronger role in order to bring all the pieces of the experience together. The catch-as-catch can approach they’ve had to far just isn’t going to cut it. Fragmentation is a death knell for a product like this at this stage of maturity. Google needs to lead the charge with an integrated platform until the experience gap is fully closed. Then it can afford to loosen the reins and let the handset manufacturers, carriers, and third party developers go do their own things independently, safe in the knowledge that they will all come together to create something interesting and valuable for customers.
How Google (or Apple) Can Win the Great Super Phone War of 2010
Jan 22nd
Posted at FastCompany.com
BY ROBERT FABRICANTTue Jan 5, 2010
Forget the smartphone. How about an AppPhone? Or a Super-Smart Phone? Yes, it’s a SUPER PHONE Smackdown! The battle is heating up with Google (finally) firing on all cylinders with the release of its Nexus One. Nice to see a worthy competitor to Apple emerge after almost three years of wimps. On a feature level the Nexus offers the right firepower. But this is battle for hearts and minds as much as processing power. These SUPER communication devices represent intense, emotional and personal commitments. We don’t just buy them, we adopt them. They are more a part of our identity than any previous digital technology. We are merging our own identities with Apple, Google, or whomever. That’s right, this is a brand war as much as a technology one. Google will have to figure out how to compete with Apple on that level if they are to succeed with their mobile strategy.
My colleague at frog, Hans Neubert, calls this approach Brand-Led Innovation. With so many new smartphones coming to market with similar features it is critical to define a differentiated brand promise and then deliver on it! Seems simple enough, but most tech companies still go about their product strategy in the opposite way: defining a set of features by imitating what’s already successful in the market; adding a few, minor twists; and then figuring out a “brand” at the last minute (Storm, Instinct, CLIQ…). So it is no wonder that all of the new super phones seem to be competing for exactly same mindshare (with an extra curve, keyboard, voice feature or megapixel thrown in). They tend to look at the brand problem in isolation, at a product level (Droid) and occasionally at a service level (Ovi, MotoBlur). They rarely taking holistic view. The lone exception being…Apple, of course.
Pre-paring for Battle
This brings to mind a moment this past summer, after the Palm Pre launched (or was that 2008? seems sooooo long ago). The future of two public companies (Palm and Sprint) were riding on the product launch. And they seemed to get a lot of things right with the design, right? The demo at CES was flawless, even Apple-like. They had a UX designer show it off (to the delight of many of my colleagues at frog). Lots of nice tech and design, but what was the value proposition: “The Pre is the only phone that lets you run multiple live applications at the same time.” What?
Why didn’t Palm think about how to position their product–in what would undoubtedly be a crowded market–before rushing to copy the iPhone? And why did Motorola following them down the exact same path with the Droid (“iDont run simultaneous apps”)? Will the rest of the pack (Microsoft, RIM, Nokia, Samsung, Dell) come up with anything better? And what about Google?
Winning Waterloo
Apple changed the game, not just with their technology, but with the way they marketed the benefits of the iPhone software experience. Touch screens have been around for a long time, yet they succeeded in making “touch” seem both revolutionary and meaningful. That got people’s attention but then Apple quickly switched gears to market the phone through an endless stream of software apps that showcase the value of the iPhone platform in new and powerful ways. Nice! Not only did Apple fundamentallyshift the economics of the mobile phone business they fundamentally shifted the software marketing game as well, forcing everyone to compete with their app store juggernaut. Try to come up with a unique value proposition for your smartphone and it is likely that Apple offers dozens of apps that deliver that same benefit. Game over, right?
It is tempting to think that Apple has all the bases covered with 100,000 apps and counting. There is nothing for Samsung and the others to do but ramp up an app store in hopes of eventually catching up. But this is exactly what Steve Jobs wants the rest of the industry to think. He wants to turn the smartphone game into an apps game that he will clearly win. We are seeing most of the major manufacturers like Nokia and RIM take the bait. If the smartphone is a computer then value must be in the apps, right?
This is home turf for Apple which knows more about computers and apps than just about anyone (including Google, I would argue). But is the app model the right one? Smartphones play a fundamentally different role in our lives than PCs. It is not self-evident that the PC/app value proposition is the right path forward. Apps are important, but they are not the whole story. Apps cut up our experiences and relationships into a million different modalities, one place to share movies, a different place to tweet and a different place to find a restaurant recommendation. But, all these apps can’t conceal the fact that Apple has neglected some of the fundamentals. What is desperately missing is the glue between these apps. The shared intelligence and integrated services that will transform the overall experience. What does Apple offer there?
Trash Your Product Requirements Document and Start Over
I would argue that Apple has music and media cornered–which is big! That is the one place that they will continue to offer a more intelligent and integrated experience, and maybe in games, too. The rising tide of iTunes and OS X will continue to enhance their entertainment offering–just look at the Genius feature. But, as people invest more and more of their time into these gadgets their expectations increase, creating new opportunities for integration unlike anything the iPhone offers. And these are profound opportunities not just to sell phones, but to redefine what a phone (and a brand) is! What do I mean? Here are some of the obvious ones. Each represents an overarching model for interacting with communications and information that is much broader than a single app or even a suite of apps. More importantly, each one also aligns well with a differentiated brand identity:
- The IQPhone: “The phone that makes you smarter”
This should be the Nexus, if Google can just stop talking about different versions of Android for a second. The integration of location and voice throughout the product, not as siloed apps, will make the phone a whole lot smarter. And, thus, make the user feel a whole lot smarter. Google indexes everything, so they are in an ideal position to augment our experiences and conversations. Through a combination of voice input, voice output, semantic analysis and location based data the phone can continue to cache relevant data to suit the context with ever-increasingly intelligence. This is seriously powerful! The phone is a cluster of sensors that can listen all the time. Google can also index that data and migrate it to the cloud through Android’s background processing to increase the precision and relevance of their services. I don’t see Apple competing with that anytime soon. - The WePhone: “Staying in touch was never easier!”
When I turn on my phone I want to see people, not a bunch of apps. Almost everything I do from a phone has to do with people either directly (calling or texting) or indirectly (sharing media, links, recommendations or other fun stuff). Contacts are the glue for 90% of what I do on a phone. So why has no one successfully designed and delivered a people-centric phone? A lot of companies have been chasing this from T-Mobile’s Fab Five to MotoBlur. But no one has gotten it right. Maybe Facebook should acquire Skype and get into the game with their own Super Phone? - The LifePhone: “The phone that knows you better then you know yourself!”
This is the one that interests me the most. As Facebook has demonstrated, we are endlessly fascinated by information about ourselves. Phones provide a unique window into our lives because they are with us all the time. This capability is being leveraged by a wave of new applications like WideNoise and augmented by a host of sensors (like GPS, accelerometer, cameras) that are standard on more and more devices. So why cant my phone become the ultimate tool for measuring and optimizing my behavior–and competing with my friends? This version would bring the social competition of XBox, Nike+ and WiiFit to everything I do, from texting to shopping to dieting to commuting. Life will become the ultimate game. You can already see this trend emerging in apps like foursquare, and frog’s forthcoming temptd. It is ripe for an overarching play.
For all of the investment in new smartphone platforms there remains a huge lack of imagination that is crippling the category. These opportunities I have described are not that novel. Some have been tried. But none have been done well enough to create a lasting identity in the market. While Apple sits on the sidelines and lets its developer community drive innovation, there is a growing opportunity for other companies to create integrated offerings that put the iPhone to shame and redefine the rules of engagement. There are tremendous opportunities for differentiation in the smartphone market for companies that stop focusing on the iPhone and resist the temptation to compete with Apple on their terms.
With the Nexus, Google still has not shown that they are serious about that.
Read Robert Fabricant’s Design4Impact blog
Browse blogs by our other Expert Designers
Robert Fabricant is a leader of frog’s health-care expert group, a cross-disciplinary global team that works collectively to share best practices and build frog’s health-care capabilities. An expert in design for social innovation, Robert recently led Project Masiluleke, an initiative that harnesses the power of mobile technology to combat the world’s worst HIV and AIDS epidemic in KwaZulu Natal, South Africa. Robert is an adjunct professor at NYU’s Tisch School of the Arts where he teaches a foundation course in Interaction Design. In 2009, he joined the faculty of the School of Visual Arts in New York and is a faculty member of the Pop!Tech Social Innovation Fellowship Program. A regular speaker at conferences and events, Robert recently gave a keynote speech at the 2009 IxDA Interaction Conference. He is a frequent contributor to a wide variety of publications, including I.D. Magazine, The Wall Street Journal,and Wired.
Button controlled smooth MC play/rewind
Jan 13th
1. Draw a square in the center of the stage.
Rectangle tool: turn off outline, click and drag on stage to draw.
2. Convert it to a movieclip symbol:
Right click on the square > convert to symbol > name: square_mc, “movieclip”, ok.
3. Add an invisible button inside square_mc.
Double click on the square_mc instance on the stage.
Create a new layer and call it “btn”.
With the button layer selected, draw another square or copy and paste the existing square.
Convert the shape to a button symbol called “invisible_btn”.
Double click on the button symbol you just made.
Select the “up” keyframe. Then click and drag the keyframe to the “hit” state.
Go back to the main timeline by clicking on “scene 1″ of the thread.
4. Create a short animation that will play (forward and reverse).
Select the movieclip instance on the stage.
Convert it to a movieclip symbol and call it “scale_square_mc”.
Double click on the movieclip to get to its timeline.
Create a motion tween by right clicking on the keyframe in the timeline and selecting “create motion tween”. (A 24-frame tween will automatically generate in the timeline).
Shorten the tween to 10 frames by clicking and dragging from the right edge of the tween.
With the play head on the 10th frame, use the transform tool (Q) to scale up the square. (Holding the shift key will preserve the proportion. Holding the option key will scale from the middle).
Note that a diamond keyframe appeared on the 10th frame in the timeline. You can make further adjustments to the tween using the motion editor palette.
We need to place a stop action at the end of the tween so that it doesn’t loop.
Create a layer and name it “stop”.
Right click on the 10th frame and select “insert keyframe”.
Select the keyframe.
In the actions palette, insert stop();
Note: a small “a” will appear in the timeline keyframe about the empty circle.
Go back to the main timeline (scene 1).
5. Label the instances (and the path to them) on the stage so that we can identify them in the code.
Select the movieclip on the stage.
In the properties palette, name it “scale_mc”.
Go to the “scale_square_mc” movieclip by double clicking on it on the stage.
Select the instance of “square_mc” on the stage.
In the properties palette, name it “square_mc”.
Go to the “square_mc” movieclip by double clicking on it on the stage.
Select the invisible button instance on the stage.
In the properties palette, name it “btn”.
Go back to the main timeline (scene 1).
6. Create a new layer and call it “actions”.
5. Select the actions layer frame and insert the following code using the actions palette:
//———–presets——————–
scale_mc.stop();
var rewind:Boolean = false;
//———–listeners——————–
scale_mc.addEventListener(Event.ENTER_FRAME,scaleRevFrame);
scale_mc.square_mc.btn.addEventListener(MouseEvent.ROLL_OVER,onScaleOver);
scale_mc.square_mc.btn.addEventListener(MouseEvent.ROLL_OUT,onScaleOut);
//———–functions——————–
function scaleRevFrame(event:Event):void{
if(rewind == true){
scale_mc.prevFrame();
}
}
function onScaleOver(event:MouseEvent):void{
scale_mc.play();
rewind = false;
}
function onScaleOut(event:MouseEvent):void{
rewind = true;
}
Note that there is a “var” (variable) named “rewind” in the presets. This allows us to use true/false statements (Boolean statements) to identify the condition of an instance. In other words, we can say something to the effect of, “If someone rolls over the square, then make it scale up. If someone rolls out of the square, turn it back off.”
In the listeners, we have an “ENTER_FRAME” event. It keeps track of what the movieclip instance “scale_mc” is doing.
The corresponding function for the “ENTER_FRAME” event has a conditional statement to execute. If the variable “rewind” is “true”, then go to the previous frame of scale_mc.
The other functions (onScaleOver and onScaleOut) essentially turn “rewind” on and off–they make the variable true or false. Rewind is false when someone rolls over scale_mc. Rewind is true when someone rolls out of scale_mc.
6. Save .fla and render.
The file should start with a static square in the middle. Roll over makes the square scale up smoothly, roll out makes it scale down smoothly.
Button to go to frame in movieclip
Jan 13th
1. Start with 2 buttons and one movieclip on the stage.
2. Insert the “santiago” label on the movieclip timeline.
Double click on the movieclip.
Create a new layer and name it “labels”.
On the frame you want to label, right click and select “insert keyframe”.
With the keyframe selected, go to the properties palette and name it “santiago”.
The timeline should look something like this:
3. Label the instances on the main timeline (scene 1).
Select the button instance on the stage that will take us to frame 15.
In the properties palette, name it “frame_btn”.
Select the button instance on the stage that will take us to “santiago”.
In the properties palette, name it “santiago_btn”.
Select the movieclip instance on the stage.
In the properties palette, name it “movie_mc”.
4. Create a new layer on scene 1 timeline and call it “actions”.
5. Select the actions layer frame and insert the following code using the actions palette:
//———–presets——————–
movie_mc.stop();
//———–listeners——————–
frame_btn.addEventListener(MouseEvent.CLICK, onFrameClick);
santiago_btn.addEventListener(MouseEvent.CLICK, onSantiagoClick);
//———–functions——————–
//go to and stop frame 15
function onFrameClick(event:MouseEvent):void {
movie_mc.gotoAndStop(15);
}
//go to and stop frame laneled “santiago”
function onSantiagoClick(event:MouseEvent):void {
movie_mc.gotoAndStop(“santiago”);
}
Note: If you want the mc to play, rather than stop at the destination frame, change the operation “gotoAndStop” to “gotoAndPlay“.
6. Save .fla and render.
The movie should start in a static state, go to frame 15 or frame “santiago” of the mc when you click on the corresponding button.
Button to play/stop a movieclip
Jan 13th
1. Start with a button and a movieclip on the stage.
2. Name the instance of the button.
Click on the button and name it “play_btn” in the properties palette.
3. Name the instance of the movie.
Click on the movie and name it “movie_mc” in the properties palette.
4. Create a new layer on scene 1 timeline and call it “actions”.
5. Insert the following code using the actions palette:
The preset:
Stops the video from playing when the file is first loaded.
The listeners:
Identify the button instance name.add the listener (describe the event, name the function to execute);
The functions:
Name of function (describes the event):only run once {
identify the instance to effect.what it should do;
}
Note: you create the name of the of the instance and the name of the function. The instance names should match (name given to instance through properties palette and in script). The function names should match (listener and function title).
6. Save .fla and render.
The movie should start in a static state, play when you roll over the button, stop when you roll out.
Create a button symbol
Jan 13th
1. Draw a square in the center of the stage.
Rectangle tool: turn off outline, click and drag on stage to draw.
2. Convert it to a button symbol:
Right click on the square > convert to symbol > name: square_btn, “button”, ok.
3. Name button and indicate “button” type in dialog box.
(Note that the symbol is stored in the library).
4. Save and render .swf.
The cursor should change to a hand symbol when you roll over the button.
Make the button invisible (when rendered)
1. Go to the square_btn timeline.
Double click on the button symbol on the stage. (Note that it has states, not frames.)
2. Move the graphic from the “up” state to the “hit” state.
Click on the “up” keyframe to highlight it.
Click and drag keyframe to hit state.
3. Return to main stage.
Double click off stage or use embedded thread to click back to scene 1.
(Note that the button should appear as a transparent aqua square).
4. Save and render .swf.
The button should be invisible.
Set different graphics for each button state
1. Go to the square_btn timeline.
Double click on the button symbol on the stage.
2. Insert a keyframe on each state:
Right click on the timeline frame > insert keyframe.
3. Change the color of the square for each state:
Select the keyframe, then select the square.
Change the color using the color palette.
4. Return to main stage.
Double click off stage or use embedded thread to click back to scene 1.
5. Save and render .swf.
Mother App
Jan 12th
MotherApp’s BlogEngine is the amazing tool that converts your blog and tweets into a native iPhone app in minutes with zero coding.
Simply enter your RSS feed URL, Twitter name and a description of your blog, then upload two images and voilà – you’ve created your very own iPhone app!
MotherApp takes care of submitting the app to Apple for approval and notifies you when it’s available for download.
It’s that easy!