Ok, so today, AR is pretty sweet but it doesn’t have many practical implications yet. There are some very cool applications of AR out there, but there are also some duds.
The most impractical part of AR is that you have to have something printed out. Being a developer, I completely understand why this is required. However, taking an extra minute or five to print out a glyph isn’t exactly fun. It’s kind of like opening the card before you tear apart the paper to get to the present.
Home Depot did a cool site for gift cards where you shake the card and it shows you a product within your price range. This is a cool way to apply AR because you already have something printed out. People will have the card already and will want to see some cool thing before they get to spend money.
Moderation in all things is a good idea, so in the future AR will be used where it makes sense. As the web weaves its way into everyone’s lives more and more, we will see this new way of interacting with it pop up all around us. Everyday products like bottle tops, gift cards, cereal boxes, books, and many other pieces of our lives will become more interactive.
A few examples:
http://augmentpro.com/video-review-target-holiday-augmented-reality/
http://holiday.rosetta.com/snowday/
Some day….some day, we won’t need paper. We’ll be able to make a shape with our hands, move our arms to easily whip through catalogs and browser tabs, and play laser tag via Skype. It will be like Minority Report – only without Tom Cruise. I look forward to this level of true interaction and its awesome that Flash will be in on the action.
Take a little bit of this cool tech and add a bit of that cool tech and you get something remarkable. This is a great example of the motion graphics that can be achieved using AR and 3D:
http://blog.papervision3d.org/2009/01/07/augmented-reality-with-flartoolkit/
This shows some guys having fun with black boxes and Papervision. Think of how much fun a five year old would have if you stamped his hand and he could watch a monitor where the cast of Monsters Inc. crawls out of his hand. Very cool stuff. There is definitely some great possibilities for installations.
The road is long and we are still at the first mile of the journey, but AR has some big promise for how we interact down the road.
For more info on FLAR, check out some of these:
http://www.libspark.org/wiki/saqoosha/FLARToolKit/en
http://www.mikkoh.com/blog/2008/11/14/flash-augmented-reality-flartoolkit/
Lee Brimelow has some great tutorials to get you started here:
http://www.gotoandlearn.com/play?id=105
http://www.gotoandlearn.com/play?id=114
NR
I recently attended the MIMA Summit and was fascinated by what I saw.
The theme was “Migrate”. The whole conference was about changing the old ways, embracing the new ones and dreaming about the next ones.
A great keynote by Jackie Huba began with talking about how to connect with today’s users. She gave some great examples of how social media can be used for good and evil. The takeaway is that you have an online presence whether you embrace it or not. A good, all-around social media presence is a great way to connect to your users, establish trust with them and build a relationship. This is no longer an option. People are online – companies must compete in an online marketplace. Whether you are selling online, advertising online, or your customers are talking about you online, you have to acknowledge and embrace that. Once you do embrace that, you can send updates to your customers, alert them to new products / services and do damage control if something goes wrong.
Case Study in Failure: The Music Industry. In the past 10 years the music industry could not have done itself much more harm than if it brought back Motley Crue and Creed. Disenfranchising the consumer is typically a bad thing, which is why the music industry, as a whole, has been reeling for years. I understand that it is a difficult position to be in when people are stealing the things you are creating, but suing the people that buy the music does not seem to be the best method of solving this problem.
Seth Godin, the big keynote speaker spoke of change. Big change. Like when Mr. Drummond began taking care of Arnold and Willis…mayhem ensued. The winds are changing – the marketplace is quickly becoming less passive and more active. Consumers are finding their voices and expressing themselves…online…where other people are listening. The Superbowl ad isn’t going to cut it anymore. Nobody will care if you have a fancy new car to sell. People aren’t sold on a car in 30 seconds anymore; they want to see every feature of it, all the technical details, reviews and find out what their peers think…all from the comfort of their favorite Barcalounger. Companies must adapt to this sea change, and agencies and interactive marketing groups need to take heed. Listen to the consumer and respect where they are and where they are going. Find new creative ways of reaching them because print, billboard and TV are old hat. Web, Mobile, social networks and [insert tomorrows tech here] are the future.
Additional presentations rounded out the point by talking about content, different channels that will connect you to users and the importance of metrics. In today’s world, we have a lot more clarity in regards to ROI. We can see if our web campaign is working, we can see if people are buying our products online and we know where they are coming from. Finding creative ways to connect the online and offline experience is the continuing challenge.
In the realm of ways to connect, people could talk about Twitter, Facebook, Myspace and so on…and they did. They were mentioned a couple of times and appeared in a graphic or two. The important thing is to not get bogged down in one technology…because…give it a minute…it will change. Twitter could disappear in a year and go the way of Myspace. Yahoo might be the next big social network – who knows? The important thing here is the concept behind networking in the online medium. Understand the theory behind social networking and you can connect with users and build relationships, which is the driving force behind all of this anyways.
Now go and get social. Tell them Arnold Drummond sent you.
NR
- Use a bug tracking software and double check it before you launch. In fact triple check it. Those lists can get long. Make sure that ALL items are accounted for in some form or another.
- In development you may have things you don’t want firing off every time you publish a file. Those pesky analytics calls from flash can get annoying. Wrapping dev / prod options in conditionals is a great way to separate – but make sure you check for “dev / prod” switches you may have in your code before going live – or you may find something not doing what it should have been doing.
- When publishing live swf files, make sure to publish with no trace statements – this will ensure your files are more secure.
- Check and clean the live server for unnecessary files – when you come back a year later, you won’t have to guess what this file and that file are.
- Check the site in ALL browsers – including PC and Mac – this is critical
- If you have analytics ties – which most everything does now – go back and check analytics to makes sure the reporting is actually working. You should be able to hit your site and come back a few hours later and make sure the tracking is working.
- If you have database forms / ties, make sure these are all working properly and saving to the database – even if they worked great on dev – run tests to make sure they are saving on live.
- If you are sending out auto-generated emails (or any communication from the site), ensure these all work properly…even if they worked in your dev environment.
- Communicate with your team effectively – Make sure your team members know what to do when going live and vice versa. Project software like Basecamp is great for this centralized communication.
- Create a private to-do list in Basecamp for “Product Launch”. When you go to launch make sure you review the list and check each item off only when complete. Anyone can set this up at the beginning of the project and add to it throughout the project. This would ensure the process is defined and available to the entire team.
Debugging in Flash has become easier in the past few years. With the introduction of AIR, we now have some nice third party apps available that will help in our debugging escapades.
De Monster Debugger:
This is my primary debugger lately. All you have to do is copy the .as files to your project, import them and instantiate them and you are on your way. Works great for AIR apps. De Monster will even work if you have a browser with flash (and a registered app running). This can be awesome or it can be confusing when you have multiple apps open soaking up memory.
http://demonsterdebugger.com/
Thunderbolt:
Thunderbolt has been used by a few guys on our team and they dig it. Here again, great for AIR apps.
http://code.google.com/p/flash-thunderbolt/wiki/ThunderBoltAS3
Charles:
Charles is a great app for seeing what is going in and out of your site or application. We use it for digging into every little piece of what is coming down from a site. Allows you to see everything going on.
http://www.charlesproxy.com/
Flash Tracer:
I highly recommend this one. Publish a file, post it on a site and open the Flash tracer panel in Firefox and bam! all of your output is right there. This tool is a must have.
http://www.sephiroth.it/firefox/flashtracer/
Firebug:
Firebug lets you explore your site in a number of areas: DOM, HTML, CSS, Scripts, etc… It steps you through each; giving you a lot of control.
http://getfirebug.com/
Happy debugging.
-NR
Attached are the slides from the Game Theory Session.
Feel free to Email me if you have any questions.
Thanks for attending.
NR
I will be speaking at flashbelt on Tuesday, June 9th at 11:30am.
The topic is theory-based experience, and will cover the making of a game from its concept and strategy to its design and development to its release and marketing. We will discuss reaching an audience with creative and controversial ideas, as well as how to cultivate an idea and see it through to launch.
We will do this, in part, by chronicling The Bailout Game, which was developed by Blue Earth Interactive, from concept to launch. We will work through this process while considering the business aspects and intended result: exposure by creating an engaging and relevant experience.
The session is geared toward Creative and Interactive Directors, writers, strategists, game developers, and the like.
Flashbelt is a great 3 day event and I highly recommend it. Attendees learn the latest on everything from Flex development to Flash technologies to design madness.
Hope you can make it!
NR
Microsites are great environments for focusing on a specific topic and bringing the user into a story.
GE was incredibly effective at this with their microsite:
http://ge.ecomagination.com/smartgrid/#/landing_page
Microsites are built for a multitude of reasons, but typically for educating users. It might be to educate them about a product or a concept, such as global warming.
Tell a story
Educating the user should be simple, even for complicated content. Find ways to break content apart, create emphasis, and draw the user into the story. In the same way that a car commercial has a script, a microsite should be scripted. Tell the users a good story and they will listen. Make it both fun and informative.
Make it sexy
Humans are visual. We like pretty pictures. Microsites need to tell a story and do so in a really visual manner. Find relevant places to add images, audio and video. Combine these elements into a pleasing story to draw users in. Do it right, and you will have a captive audience for performing your voodoo; whether it be selling, teaching, or general mind control.
Keep it short
Our culture has developed a collective A.D.D. In the current age of Twitter, we cannot imagine reading something over 160 characters long. In creating a microsite, you need to buy into this and trick people into reading a lot of text by breaking it apart. People will not read 320 characters at once, but they will read multiple Twitter posts. Information can be presented to the user in bite size chunks, such as pages, small paragraphs, and visuals.
Guide the user
Within the realm of telling a story, we want to constrain the user more than usual. On a corporate or social networking site, a user is given all the control in the world. However, the microstory has to direct the user. Giving too many choices may confuse things and cause the point to be missed.
So, to stay within the Twitter character set:
Great story + sexy visuals + bite size content + guided experience = Bad-ass microsite.
NR
The days of “cool, you have a website” are long gonzo. The latest is “information please, and make it sexy, pronto!”. UI Design is all about making the user walk away happy, which means quickly and with as much possible information. There are a million rules, guidelines and suggestions, and this post is no exception. Here are some more.
General rules
- Always keep the user in mind – identify your target audience and try to think like them (old or young, tech savvy or not, etc…)
- Keep standards and trends in mind – Web standards are there for a reason and people get used to those things, keep those in mind when designing. Keep an eye on the trends because that is what people are seeing right now.
- Keep the user comfy – they should always know where they are, how they got there and why they care.
Organize Content
- Dynamic content area – this is the latest hotness for a reason. You can constantly change anything visual in and out. It shows the user exactly what you want them to see. Uses are endless.
- Highlight important items (bold, color, popups)
- Tabs – find ways of tucking content away and making it easy to find….quickly – using Flash platform or other methods you can make this asynchronous and very fast.
- Isolate content (boxes, white space, popups) – White space means you’ve done something right….keeping your content small and efficient.
- Big is the new small (big headers, big titles)
- Know the content going into the interface
- Users will use scrolling or paging where needed – you don’t have to be above the fold anymore – we are a facebook and twitter nation and have realized that all that stuff isn’t going to fit in one screen.
Be Consistent
- Keep headers in the same place
- Never move the navigation
Be Concise
- Effective writing keeps text short
- Show the user only what they need to see
- Don’t overload the user
Keep it simple
- Educate the user as they go with notes or help items – drop help items in where you can. Use tooltips or advertise features so help the user user “get it”.
- Avoid complexity - see organizing content
- Guide the user where possible
- Deliver content in digestible pieces
Give the user control
- Intuitive menus
- Collapsible items
Use the right technology
- Know your toolkit – whether it’s The Flash Platform, Ajax, Java make sure you know everything you can do in the environment.
- Use existing technologies – existing framework, libraries and components open up a world of possibilities. Don’t reinvent the wheel.
Links:
Here are some great links on the subject
http://designreviver.com/tips/7-common-web-usability-problems/
http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
http://sixrevisions.com/usabilityaccessibility/20-websites-to-help-you-master-user-interface-design/
NR
I’ve been digging into some design blogs lately and found an incredible amount of resources out there. From brushes to gradients to styles to actions to tutorials you can find a great deal of ways to beef up your Photoshop Chi.
In both of these images I used some great Fractal brushes out there as well as grunge sets and swirl / floral sets. Play around with brush sizes, colors, layer styles and opacity to get some great effects.
Fractal Brushes
http://webdesignledger.com/freebies/18-photoshop-brush-sets-for-creating-incredible-lighting-effects
Kuler is always a great way to find a nice color palette.
Some great photoshop lighting tutorials
Design Reviver and Noupe are great resources for all the photoshop goodies and tutorials.
Smashing Magazine also has some great Creative Suite tutorials and resources.
http://www.smashingmagazine.com
NR
Please welcome Flash based blogging to the stage. Kontain, created by Fantasy Interactive is great way to store all of your media and blog blog blog in a flash environment.
One cool thing about being flash based is that it’s asynchronous. To update your list of recently kontained items you don’t have to update everything else on the page. Your kontent shows up on a main kontain home page for the world to see.
The design is very web 2.0 and all the content is very easy to find. The upload features are great – you can upload multiple items (very helpful when uploading a bunch of photos).
Friends can comment on your uploads, and you can add tags to all of your content.
Currently they have it hooked into Twitter, which is nice. Facebook support is in the production queue – which is what I would really like to see in it.
One downer is that you don’t have the content on your own server, and you can’t seem to custom skin anything, but there is no install process and you can be up and running inside of 2 minutes.
There are some very bright people to follow on Kontain, so if nothing else it’s a great place to keep up on the latest from the giants in the industry.
Kontain is currently in alpha and I’m sure will only get more cool as they release new versions.
NR
ABOUT
Broadcasting creative interactive
RECENT POSTS
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « Dec | ||||||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |