Archive for the ‘Mobil App Development’ Category

Google’s Project Tango at Cogswell College

Thursday, April 9th, 2015

Recently, a small group from Google visited Cogswell College to teach a class about and demonstrate Project Tango. What is Project Tango exactly? Project Tango is a brand new mobile device that has the ability to navigate the world, similar to us humans. It’s an Android device/platform that has spatial perception, and accomplishes this by using advanced computer vision, image processing, and special vision sensors.

One may think, “That’s all fine and cool, but what does this thing do exactly? And what practical applications can be derived from such a technology?”. To put it simply, what Tango does is continuously scan the surrounding environment as the user walks around with the hand-held device, and then it uses the data it collects to construct a 3D model of the environment. It uses motion tracking to give real time info about it’s motion through 3D space.  It also uses depth sensors for depth perception (allowing for interactions between the real world and the virtual world Tango has built/is building) and it can learn new areas intelligently. If there are any errors with the 3D model it has created, Tango can use visual cues around the space to re-render and fix trouble areas. The potential applications for such a technology includes, but isn’t limited to, new Virtual Reality or AR games and applications, video games, rapid environment generation, and more. The potential is limited only by imagination.

The Cogswell class, which is currently learning to use Unity, was tasked with testing the devices, running an application, and providing feedback as they went along. Google called it a Code Lab event, the purpose of which was to iron out and fix any bugs in the system before this year’s Google I/O conference in roughly two months. Students debugged Google’s sample instructions, tested and ran the code, and followed development environment instructions – all while under the direction of watchful and curious Google engineers. Google had previously tested these devices at nVidia, but were impressed to see that Cogswell students produced better results and provided higher quality feedback.

For the demo, students were each provided with a Tango tablet device, USB cables, a pin code to unlock the devices, and a URL in which they found further instructions. The students booted up their devices and launched a 3D mapping app which tracked their movements. As they moved around the classroom, the students got feedback through interactive mapping, cloud arrays and more. The students then returned to their workstations to continue the demo. The students went through a series of environments to get an app running in Unity, importing that app into their devices, then running that app on their devices as they moved around. Some students continued with the instructions provided to them, whilst others conversed with the Google engineers.

The success rate of the tests and demos was 100%, much better than other tests that Google had done before. Whenever any of the students would get stuck, they would first work together for a solution, using the Google engineers as a last resort. Working together led all students to success. As the class progressed, the Code Lab event slowly turned into a seminar where students brainstormed potential applications for the technology.  Ideas included a music application for better microphone location/tracking within a room and an app capable of creating 3D sound environments.

All in all, it was a successful demo and everyone walked away with new knowledge – and an amazing experience!

Based on notes from John Duhring’s experience
with additional content and editing by Juan Rubio

Experience at the Game Developer’s Conference

Monday, March 16th, 2015

Image from url: http://www.sonniss.com/wp-content/uploads/edd/2015/03/gdc15_logo.jpg

I went to my first Game Developer’s Conference (GDC) this year, thanks to Cogswell’s ASB. From March 4th-6th, I was on a mission to do as much networking and have as many portfolio reviews as possible. However, there was no way I could be prepared for the level of insanity that this conference offered. I’ve been to animation conferences and other game events before, but this conference was the Godzilla of the gamer spirit. Imagine mega-nerds gathering from every different corner of the world and combining forces for a non-stop celebration of the video game industry —that would be close to capturing the essence of GDC.

When arriving on Wednesday, my first objective was to hit the Career Center. This area houses quite a few game company booths who have job opportunities. Fortunately, a few companies were interested in my portfolio, and I was able to get portfolio reviews with Gree and Glu Mobile. The High Five Casino games representative wasn’t able to do portfolio reviews, but she invited me to come back to speak to their art director.

Afterward the Career Center, I hit the main expo floor with some friends. Some of the biggest companies were there—Microsoft, Xbox, Steam, Windows, Google, and Unity to name a few. Many of them were showing off the newest tech that would be coming out in the next year or so. One display had a man hooked into a virtual reality setup in which he was physically running, turning, and shooting his gun. There were plenty of mo-cap setups as well, where one man was jumping around and playing basketball, with a monitor displaying a 3D character replicating his exact movements. I was particularly excited about a booth from TalentScotland—multiple game companies based in Scotland were being represented and actively looking for overseas workers. Working in Scotland has been an interest of mine, so I was pretty excited to find this booth.

After the conference hall shut down for the day, the real fun began. Companies rented out full bars and clubs just for GDC attendees. On Wednesday, I went to the Polycount Mixer and then to the Epic Games after-party. The events are intended for networking as well as having fun, and I made more contacts there. I also met an awesome group of people from the East coast and another from Denmark and Spain.

One thing I discovered at GDC was how big the gaming industry was in Norway. There was a whole section dedicated to Norwegian indie game developers, and apparently investors throw hundreds of thousands of dollars to those who are willing to make games. In that moment, I considered the possibility of moving to Norway to work as a 2D artist.  Then I remembered I was a California girl and would likely freeze to death in Norway!

I was able to get some very beneficial contacts from GDC, one being with the Director of Engineering from Gree Mobile, based in San Francisco. I will be visiting the studio next week and having dinner with some of their employees, which is a fantastic opportunity. I wouldn’t have had the chance to talk directly to artists in the game industry had it not been for GDC. I would absolutely recommend the conference to anyone who’s looking to get into games. Besides being exposed to some of the best work out there, you are immersed in what the game industry truly feels like. I’m excited at the chance to have some of these people as future coworkers—the workweek would certainly not be a boring one.

Sierra Gaston

Project Anywhere

Friday, March 6th, 2015

Image from designboom.com

A student at ETH Zurich, Constantinos Miltiadis, has been working on a kit which challenges the limits of human physical presence within a space. Code-named Project Anywhere, it works by combining augmented reality and virtual reality to achieve communication and interaction through virtual space.

The project is controlled by a smart phone app that functions like a decentralized network. It communicates through the use of a cloud-based software and offers real-time regulation. Accompanying the app are 3D printed gloves with a special rubber-like filament cleverly titled, “Inteligloves.” They allow the user to interact fluidly within the virtual environment of the app. The gloves are also able to track palm orientation, in addition to finger movement, via six bend sensor sockets. What makes these gloves truly awesome is that you can print the main components of them with a 3D printer. Aside from a 3D printer, in order to assemble the gloves, you will also need an Arduino Mini Pro, Xbee radio module, inertia measuring unit, six bend sensor sockets, and a LiPo battery.

Even though the project is in it’s early stages, it shows much promise and importance to many fields including gaming, business and medicine.

See the project in action at the following link: https://vimeo.com/113398928

3D modeling on IOS

Friday, January 16th, 2015

Image from: www.morphiapp.com

A company by the name of Inventery, Inc has put out a free 3D modeling and printing app called Morphi for IOS. The app gives us the ability to manipulate 3D models with a finger on an ipad and ipad mini in hopes of mainstreaming modeling in three dimensions. The latest version supports features that include: 3D model uploading to Thingiverse, grid customization for 3D printers, the ability to turn your 2d drawings into 3d models easily, an integrated copy and paste filter so you can easily manage your clipboard, an enhanced ruler and many under the hood improvements.

See the app in action after the break:

https://www.youtube.com/watch?v=1X1UJAHQl-Y

Peter Gazallo

3D Displays through QR Codes

Friday, November 28th, 2014

Image credit goes to Gizmag.com and The Optical Society A "lenslet" sheet is placed over a smartphone screen to show a 3D image

A team of engineers led by Bahram Javidi (Professor of Electrical Engineering) from the University of Connecticut have found a way to display 3D images by simply scanning a series of QR codes, without needing use of the internet. This is possible due to the storing of compressed and encrypted images, which can be easily scanned, decrypted, and decompressed by commercial smartphones for secure 3D visual communication. This process is done by selecting the primary image to be visualized. This could be either a single 3D object, or an entire 3D scene. The 3D image is then broken down by taking multiple 2D images of it from multiple perspectives called elemental images. Each elemental image is taken from one portion of a precisely oriented array of tiny lenses called lenslets. The lenslet then captures the scene from many slightly offset perspectives. The elemental images are then split into two essential parts: the unique perspective of the 3D scene and the corresponding intensity information. This system is still in the concept stage and not yet available for commercial use however, the researchers believe that their system can be improved to produce higher quality 3D visual images and a more secure integration with smartphone technology.

Peter Gazallo
Digital Art & Animation Student

What Does it Take to Be a Mobile Designer Today?

Tuesday, June 17th, 2014

Mobile is here to stay, with its own set of rules and constraints. At the same time, it’s a rapidly evolving platform, with new technologies and capabilities being added by the quarter. We can’t design for mobile like we used to do for posters and Web pages. So what toolkit and mindset does a mobile designer need to thrive?

Challenges and Constraints

Every medium has its limitations. Even mobile—one of the richest canvases a designer can dream of—still has particularities that need to be addressed:

Device fragmentation

There are countless smartphone and tablet models out there, each one with a different screen size, pixel density, and physical input (not to mention screen orientations). This means we can’t just pre-assume an iPhone 5 screen-size and design tightly to it. In mobile Web, responsive design allows us to plan for variations and make the design adjust to different screens with little effort. In native mobile design there is less liquidity, so we need to think our designs as tolerant to screen differences, and document the way such variations impact the layout.

OS fragmentation

As of today, we have three major mobile operating systems to consider: Android, iOS, and Windows Phone, in order of usage. Every OS has its own set of interface patterns, external inputs, and guidelines, not to mention variations between OS versions as well. Within Android things are even more complex: the version of Android a device will use is going to be influenced by the device maker, which can overlay its own layer of UI on top of it, and the device itself and its processing capabilities (not to mention the upgrade delays imposed by some carrier companies).

Even if this fragmentation does not make the design vary too much, it does influence how users experience an OS and what they expect from it. Consider, for example, that the experience of Android that most users have is actually the TouchWiz or Sense interfaces.

Performance

The way an app is designed can influence the amount of energy it uses. To put in other words, our design can leave our users without battery juice. Certain unnecessary visual effects or animations may need intensive graphic processing to run; a JavaScript-intensive Web page can also use a lot of power. And while our newly purchased device may be running our app smoothly, a 2-year old device may be struggling with it. These are just examples to illustrate the idea that a mobile designer needs to understand the impact that their decisions have in how an app performs and uses the device’s resources.

Development and cost constraints

Just because we saw it in that cool new app the other day doesn’t mean that it can be easily implemented. The way we design an app can make the difference between meeting and missing a deadline. If we don’t clearly understand the cost of the design decisions we make, we are basically putting the burden on the developers and creating an opportunity for friction later on.

Things to Unlearn

Many of us have been trained as designers in an era where a digital mindset was still incipient. That has historically caused us to approach digital design from a static point of view (exporting HTML directly from Fireworks, anyone?), and the misalignments that result from this perspective are still being taught in design schools. With mobile design the gap is even wider, as mobile brings a language for which nearly all of our current tools and methods fall short. So it’s time to update our mindset.

Mobile is not a canvas

HTML isn’t a canvas either. You can’t just throw things at it like you’re designing a poster. I suspect that designing in Photoshop is not helping us in making the switch, because we have been using it to design posters and illustrations and retouch photos for more than two decades. We’re still “painting” our interfaces, when screen size fragmentation and the dynamic nature of mobile call for a different approach to design.

Stop thinking of screens and start thinking of transitions

We are just starting to realize that the “screens” approach doesn’t cut it when it comes to mobile design. Thanks to apps like Facebook Paper or Yahoo! Weather that showcase a different way of designing, we know we need to design based on transitions rather than still images.

Transitions, once just disposable eye-candy, are becoming the center of a mobile experience. They not only give a live, interactive tone to the interface: they are an interface element in their own right. Transitions convey movement, space, change, and hierarchy and are a great ally in communicating the underlying app structure to the user. They also render a static approach useless.

Put your designer ego aside

You don’t need to be unique or original, especially when being “unique” means redesigning a known interface pattern just for the sake of uniqueness. More often than not, sticking to native UI elements and patterns is the smartest move to get the app completed on time. Rather than pushing your designed-from-scratch set of UI controls, focus on creating a simple, effective interface and create branding that shines.

For inspiration, real apps are better than designer portfolio sites

Many designers go to the likes of Behance or Dribbble in search for inspiration for their next mobile project. While you will always find beautifully crafted artwork on such sites, if you are not a seasoned mobile designer, those mockups can be misleading. Many of them are just that—mockups that have never met reality, and they can bias your judgment toward believing that you must create an entirely customized UI every time.

Get inspired by real, successful apps. There you’ll find the designs that have made products thrive. Their interface patterns have been tried and tested in the real world, and you know for sure they can be replicated.

New Skills to Learn

Know the platform

Just as you need to understand HTML/CSS to be a good Web designer, you need to understand the underlying structure of mobile apps too, and they are totally different from Web pages. For instance, they don’t “flow” the content as HTML/CSS do, and that changes a lot the way we should think about the layout. You won’t have the magic of CSS inheritance (at least not nearly as polished and not out of the box) to separate markup from presentation. Oh, I almost forgot: there’s no “markup” either.

You will need to get into some documentation for developers, read the manuals and understand how mobile apps are assembled, compiled, and published. Understand how a mobile device works and which things drain the battery the most. You may even need to learn some code basics, which pays off in the long run: you’ll be able to learn the developer’s language and you will design with efficiency and feasibility in mind.

Know the nuts and bolts of mobile technologies

Here’s a laundry list to get you started: location services (Wi-Fi- and GPS-based), Bluetooth, Low-Energy Bluetooth, beacons, front and rear camera, microphone, gyroscope, accelerometer, vibrator, fingerprint scanner, eye tracking, voice recognition, face recognition, tap detection, and the list goes on and on. Every new technology opens the doors to a whole new breed of apps. Your responsibility as a designer is to be aware of the cutting-edge.

Discover how far you can get with native components

Native UI components actually give lots of freedom to customization efforts, but you need to know exactly how to use them. If you can do most of your UI with native controls with a few tweaks, you’ll save a great deal of the developer’s time, which they will be thankful for.

Know the mobile workflow

Learn about mobile SDKs, install them and get them to run. Learn about mobile frameworks, such as RubyMotion, Xamarin, or Titanium. Get familiar with IDEs, where the graphic assets are located within a mobile project, how they should be named, etc.

Learn mobile interface patterns

All three major mobile platforms have similarities and profound differences on how they understand mobile interaction design. Their users expect different things from them. As a mobile designer, you should be completely aware of these differences and able to detect them on the spot.

Don’t stick with a single mobile platform. Try all three, or at least use Android and iOS on a daily basis for at least 6 months each. I did it, and it’s great—you get insights from each platform you’ll never get with casual use or looking at screenshots. And switching is good: being a fanboy is bad for a mobile designer.

Document and explain your UI

Since screens don’t tell the whole story anymore, you will have to document different states, transitions, and animations as well as how the app reacts to data and to the environment. Annotate your mockups, provide animation examples, and plan for device orientation.

Embrace Lean UX in the design phase

A modern designer should be a strategic designer. So your goal, rather than just come up with something beautiful, is to infuse into the design everything the team has learned about the product. Prioritize rapid prototyping in order to get early insights of what the users want. Save the detailed artistic work for later. Ensure that everything that is designed is aligned with the core value proposal and with the users’ needs.

Embrace Agile UX when implementing

You can’t just hand your mockups to the developer and forget about it, as most of the graphic requirements will arise when developing. There will be always screens not previously considered, new transitions and state changes that require new graphic assets. You need to be there and respond in real-time. So bring your chair next to the developers and be ready to step into the design when needed. Make sure that the developers only have their mind in development and that they don’t have to make UX decisions to fill your gaps.

Some Extra Tips for Mobile Web

Be responsible with responsive

For mobile Web, responsive design is not the one-size-fits-all solution. In some cases it makes sense, in others it doesn’t. It’s your responsibility to know where mobile demands a dedicated solution and where a few responsive tweaks are enough to maintain a single code base. Even if you are designing for “traditional” Web, plan your layout so it adapts gracefully to different screen sizes. And mind asset sizes: that nice full-screen 1Mb background image can make your mobile visitors waste money in cellular data consumption.

Use CSS and JS candy with caution

Yes, CSS animations, gradients, transitions, and shadows are great and incredibly easy to implement. And parallax is neat, plus all the cool guys do it, right? But these elements can take a toll on a mobile device battery. The more “live” visual effects you pile up, the more sluggish the scrolling will feel and the more power it will consume.

Even innocent CSS3 selectors can impact performance on low-end devices. Prefer ID’s and classes when possible, and try to keep your descendant selectors low. So if you can go with #submit instead of .main .container .form > div .submit, it’s a good idea.

Use the Right Tools for the Job

This is not at all a definitive list, and you will find great alternatives for many of them, but these are some good tools suited for mobile design (some of them are free, most of them are Mac-only):

Sketch for graphic design and @2x hi-resolution export. This is arguably the heir of the now discontinued Adobe Fireworks, and it has been done with mobile in mind.

LiveView and Sketch Mirror (a companion for Sketch) for mirroring your screen to your phone. Things look and feel very differently in a device. You’ll be able to easily test the size of interaction areas and controls.

Origami (by Facebook) and Quartz Composer for mobile interaction and animation prototyping. This is the closest you can get to a native UI prototyping without coding, and will give you a good introduction of the kind of logical thinking that programmers use.

PaintCode for creating UIs and graphics and exporting them directly to Objective-C.

Mockup web software. There’re plenty: Balsamiq Mockups, Axure, UXPin, Moqups, Proto.io, just to name a few.

Flinto for creating mobile interactive mockups that can be installed in your iPhone, mimicking real apps (taking advantage of Safari’s Add to Home Screen feature).

ImageOptim for compressing your PNG and JPG files without loss of quality.

Version-control software, preferably Git or Mercurial. Commit your assets and changes directly to the repository and in real time, rather than e-mailing a ZIP to the developer.

All of this is Already Obsolete

Not really, but the pace of progress in mobile technology is incredibly rapid. In no time we will be faced with the challenge of designing for wearables, smart appliances, and sensors connected to our mobile apps. New challenges and innovations come out daily. So, if anything, being dynamic, flexible, and ever-curious as a designer is what will ensure you grab a seat in this roller coaster.

This article originally published at UX Magazine here.

Marketing Your Mobile App – Advice from the Federal Trade Commission

Thursday, March 6th, 2014

As mobile app developers soon discover, coming up with a great idea and then building the mobile app is only just the beginning. According to the Federal Trade Commission (FTC) – the nation’s consumer protection agency – it’s never too soon to start thinking about making sure your app is compliant with current commerce regulations.

While every app is different, there are some general guidelines that every developer should be thinking about:

  • Truthful advertising: Don’t make claims your app can’t deliver. One rule of thumb: Look at your product and your advertising from the perspective of average users, not just software engineers or app experts. If you make objective claims about your app, you need solid proof to back them up before you start selling.
  • Disclose key information clearly and conspicuously: The goal is to make sure they are big enough and clear enough that users actually notice them and understand what they say.
  • Build privacy considerations in from the start: You accomplish this by limiting the information you collect, securely storing what you hold on to and safely disposing of what you no longer need.
  • Be transparent about your data practices: Explain what information your app collects from users or their devices and what you do with their data.
  • Offer choices that are easy to find and easy to use: Give your users ways to control how their personal information is collected and shared.
  • Honor your privacy promises: Reread your privacy policy or what you say about your privacy settings. Chances are you make assurances to users about the security standards you apply or what you do with their personal information.
  • Protect kids’ privacy: You have additional requirements under the Children’s Online Privacy Protection Act (COPPA) and the FTC’s COPPA Rule so make sure you know what they are.
  • Collect sensitive information only with consent: Get your OK before you collect any sensitive data from them.
  • Keep user data secure: Under the law, you have to take reasonable steps to keep sensitive data secure.

The article contains some helpful links giving you access to additional information.