3 Tips to Start Using Motion in Design

3 Tips to Start Using Motion in Design

Motion connects the designers and developers who are working on a mobile application with its users. Scrolling, navigating through screens, and adding or editing content may all be inherent features of an app in 2017, but the app still needs to feel right. UX designers live for the challenge of making an app feel right to the user, and motion is one tool in their arsenal. As Shockoe tackles mastering this tool, here are three tips for how to start thinking about integrating motion into your designs.

Tip 1: Show the Relation

You’ve put in the work, made the sitemap, and even mapped out the flow. You know exactly how to get from Screen A to Screen Z. Do your users? It’s important to make sure your users will be able to navigate the app with the same fluidity you do. Probably the best option for ensuring this is one of the simplest: show your user where the screens are coming from.

Navigating from the leftmost tab to the one on the right? Show that by pushing your current content off-screen to the left, making room for the new content coming in from the right. Google Play Music is a fantastic example of how an entirely new page can originate from a single, much smaller element. It shows the growth of that element into a full page.

Tip 2: Don’t Lose the Users

This touches a bit on the last point, but it is key that you don’t confuse your users or lose them in a complicated motion. If you have too many elements moving in too many directions, or even one element moving too far, you may run into some problems.

An example of what to do and what not to do both come from different implementations of the same feature in different versions of the Android operating system. On devices that ran Android M, there was a hovering search bar at the top of the home screen. This was a great addition, bringing a Google search right to the forefront of the user’s most-frequented screen. As you might expect, the search automatically offered suggestions as the user typed.

On the newest Pixel 2, that search bar has been moved to the bottom of the home screen, just under the app drawer and just above the software buttons. A UX/hardware issue is solved here by allowing users to reach their search bar more easily, but a visual transition issue is created. When the user taps the new bottom-anchored search bar, it acts like before and is now on the top of the screen, populating your autofill search results. This is probably nit-picking and just requires some getting used to, but it makes the search bar feel like more of an “activation” and not a true, transforming element on the device’s screen. That takes away a bit of what made that simplicity in movement so special.

Tip 3: Have Some Fun. Find It, If You Have To

This point applies to everyone in design, but it holds special weight in designing motion as there is so much that can be done. This is more for your own sanity, but it’s very important in every project to have even a little fun, and not nearly enough people value taking a moment to do so. A solid check for this is looking inward and thinking about what you would want to see an app do.

Take 15 minutes, grab your notebook and a pencil, create some sketches, and just … go with it. Look at what’s been done in other apps, what hasn’t, and find what works for you. Don’t limit yourself to the mobile realm for inspiration; consider television shows, video games, etc., as well. The kind of work we’re most proud of is typically the work we enjoy making, so be sure to explore every corner of your creativity when designing motion.

So what are your thoughts?

Hopefully, these tips have helped you start thinking about the ways you can use motion in your designs. In this post, we touched on the basics of motion; we look forward to expanding on these ideas in a future post that dives deeper into the nitty-gritty details on how to make motion work in your apps. As you start integrating motion into your projects, reach out and let us know what you think, if you have any thoughts to add, or if these tips have helped you out in any way.

Editor’s Note: 

Want more tips on Design? Check out our most recent blogs:

10 Commandments of Designing for Accessibility Every Designer Needs to Know

How to Apply Minimalism to Complex Apps

Interested in what it would take to kick off your project?

Our experience and core services include strategy & transformation, user experience & design, mobile application development, and API management.

So you have an app idea – now what?

So you have an app idea – now what?

So you have an awesome idea for an app. There’s just a burning hole in your front screen every time you unlock your phone. Your idea is keeping you awake and with many sleepless nights, you just know this is it! Your app is revolutionary and will change the world, and really, you are just sooo ready to make a gazillion million dollars. So now what?

As a marketing/sales coordinator at Shockoe, I receive a lot of phone calls stating just that. I’m not kidding. Some obscure, some genius and some just plain mind blowing. As a one of the fastest growing companies in Virginia our deep passion lies in making beautiful and useful apps with great technology – nothing gets us more excited than a chance to help you bring your idea to life. So I’m here today writing a little guide, if you will, to help you navigate in this craze driven mobile world and give you a couple of pointers to consider before diving head deep into the commitment of making your app. So here goes nothing.

First – I’d like to bring it to your attention that making an app is a full on business. That’s right, one that requires planning, skills for development, design, support of the product, marketing, money and the list goes on. So you might say, of course, that’s pretty obvious. I’m willing and ready to put this much into my app idea because I know it’s going to do well. Well here’s what to consider next.

Is your app going to promote an existing business or is it a completely separate entity you would like to make money from? If it’s an existing business app idea serving as a compliment to your service, do your research. Search through app store or google play – see which ones failed and which ones worked before and play around with existing apps.

And now, the juicy part – the price. Do you price it “free” or do you charge users for downloads? How much of a budget did you set aside towards the actual creation of your app? Is it going to be an Iphone app, Android or both? Do you want us to make your app completely from scratch or do you want to put in the time to write a basic code and have us help you make it pretty and functional? Now, what about getting your app out there? Are you going to promote it and market it out yourself? What is your time line in completing the app and how fast do you want it to hit the market? And once it’s out, how will your app updates and bug fixes along with any other tweaks will be handled?

As you can see, the list goes on and on. At Shockoe, we are proud to say that we can help you with the entire process. From creating a strategy and defining how this app will help your business and what you can do to take advantage of your mobile strategy. To then of course, carrying out this idea and knocking out the user experience and design portion of it to make sure your baby is effective, productive and adds value. Then doing the development and integration portion of it (and trust me I’ve seen our developers typing away their codes – it really does looks like an intimidating different language to a non-techie like myself). To then, the customer success management portion which is critical to your mobile app’s success! We want to make sure your mobile solution never loses value to your users and we ensure you receive the best application support, maintenance & monitoring services you deserve.

Anyways, the team is pretty awesome and as stated before: we will get it done because mobile apps are our number one passion. So to do it right, making an app is a full business but we are certainly here to help you every step of the way!

So what are you waiting for? Go ahead and contact us now and let’s get your awesome app idea out into the world!

Appcelerator Titanium iOS Debugging with XCode

Appcelerator Titanium iOS Debugging with XCode

Earlier this week, I was debugging and I was reminded of the sheer power of the XCode developer tools, even in the context of a not-quite-native application like a titanium application.

The Problem

Andrew was working on an application that will load in a large number of images and PDFs from a remote server and display them to the user, in-app. However, when we got to the point that we would be displaying a certain one of our images, we saw this in the Titanium console:

Sorry, what? It seems like something odd is happening at a native level, and Titanium is getting too confused to return a sensible error message. Well, guess it’s time to open a support ticket with Appcelerator and wait for them to figure out what the issue could be, right?

Wrong. One of my favorite things about Appcelerator Titanium is its open-source nature. What we can do from here, is open up the native project generated by Titanium and debug it with the normal native debugging tools. When you build a Titanium application for iOS, a (pretty much) normal XCode project is generated from your project, compiled, and run on whatever test device you have selected. In situations like this, we can take that project and manually re-build it in XCode for debugging purposes.

Opening your project in XCode

To open your project in XCode, first run

in your project’s directory. This will ensure you have a native project generated for your Titanium project. From here, all you need to do is open XCode, and open up the XCode project in the build/iphone folder.

Path to a Titanium project's compiled XCode Project

Setting Native Breakpoints

Now that we’ve got the project in XCode, we need to set up a native breakpoint so that we can see what the issue is with the Objective-C code that Titanium is executing on our behalf. Fortunately, the message that Titanium printed out gave us a selector name:

. Let’s go ahead and set up a symbolic breakpoint for that selector:

Add a breakpoint in XCode by clicking the second icon from the right in the side bar, and then clicking the plus in the bottom right

Add the symbol from the error as the symbol name

Enter the XCode debugger

Now that we’ve got our breakpoints set up, we can run the project in XCode, and execution will stop when our breakpoint is hit in the Titanium SDK code.

The debugger will automatically pause execution when you hit a breakpoint.

Let’s go ahead and step over a few commands and see if we can figure out exactly what’s going wrong.

Step Over

Huh, it looks like we’re having some issue turning our Titanium file into a UIImage that we can apply to the native UIImageView. Let’s use the variable inspector to figure out exactly why we’re failing to convert this into an iOS image.

XCode variable inspection

Well, one look at the MIME type is enough to see exactly what’s wrong. Our file isn’t an image! Even though this didn’t tell us exactly where the issue was, it was enough to direct our debugging (we eventually figured out that we were accidentally saving a PDF file as an image – oops!). Issues like this are why I’m very quick to reach for XCode when I see a native iOS issue – it makes it much easier to figure out what parts of your code might be incorrect when you can easily trace through Appcelerator’s code!

Enabling Push Notifications Part 3 of 3

Enabling Push Notifications Part 3 of 3

Android Code Setup

Android is set up the same way with just a few minor differences.  On Android we use the ti.cloudpush module and ti.cloud forPush Notifications.  After registering with the server, the function should return a device token.  Save this device token in app properties.

Example : Ti.App.Properties.setString(‘deviceToken’, e.deviceToken);

 However make sure you set the application properties on the callback and not inside the common JS library.  These lib files can sometimes act strangely when it comes to saving app properties.

In the index js file we set up the device to look for a token and if there is not one to register the user for Push Notifications.

The device token that is generated will allow the application to receive notifications.  You will be able to register the device with ‘Channels’.   The server can push information to certain Channels.  Say you want sports news.  Then a Channel called ‘sports_updates’ could be created.  Channels are not done  server side.  Creation is done on the user side.  There is not a way to manually add a channel on the ACS Dashboard.  Once a user subscribes to a channel for the first time then it is created.

Subscribing a device token to a channel is a function in the common JS library you created for Push Notifications.  In this function we pass two variables. One being the channel and the other being the device token that was generated earlier.  Each one is needed for the subscription.  Now the module ti.cloud will be required for this project as well.  The first module, ti.cloudpush, is just for registering a device token, and ti.cloud does the rest.  So we add ti.cloud to the notifications lib file.

Subscribing a device token to a channel is a function in the common JS library you created for Push Notifications.  In this function we pass two variables. One being the channel and the other being the device token that was generated earlier.  Each one is needed for the subscription.

You will also need to allow the user to unsubscribe from Channel based Pushed Notifications, which can be done using the unsubscribe function.

Now we need to create a sample page to test this all out with.  It will have a view, label, and button.  Clicking this button will subscribe the user to sports updates from the ACS server.

 This will create a basic view with a label and button on top of the window.  It will say ‘Sports’ and upon click will call the register function from the notifications lib file.

notifications.js

You can also have users set up on the ACS server and log them in and subscribe to channels.  However the user account must exist.  Generally one user is created for the public, such as the ‘push_notifications’ user we see in the code.   This is perfect for just a basic app with notifications.  If you want user sessions and give the ability for people to create their own accounts you will have to look into Titanium.Cloud.Users on the documentation.

Sending Push Notifications using the Dashboard (http://dashboard.appcelerator.com)

This will cover three different ways for notifications to be sent.

Sending to Specific Channel/Users
Sending to All Channels
Setting up Recurring Notifications

Screen Shot 2014-03-04 at 1.19.11 PM.png

Go to the Dashboard, then Cloud, then Push Notifications.  You will see a button that says ‘Send Push Notification’, click on it.

Sending to Specific Channel/Users

  • Channel – Which channel to send the notification to

    • Choose ‘Specific Channel’

  • Choose ‘Specific Channel’

  • Users – You can choose to enter a username if you have created any to notify just users who are subscribe to that channel.

  • Alert – The message body you want the user to see

  • Send When – The time you would like to send the notification

    • Choose ‘Send Now’

  • Title – The title of the notification

Lets say we notify the ‘sports’ channel, then we need to choose ‘Specific Channel’ under the Channel.  Then under ‘Channel Name’ you would put ‘sports’.  The ACS server is Case Sensitive, so stick with lowercase or camel case.  For the ‘Alert’ section just come up with something such as ‘Richmond, Virginia to get an Major NFL Team’.  Under ‘Send When’ choose ‘Send Now’.  Then for ‘Title’ enter ‘WZYB Sports’ or something like that.

Screen Shot 2014-03-04 at 1.38.40 PM.png

Click ‘Save Changes’ which will send the notification to the subscribed devices.

Sending to All Channels

  • Channel – Which channel to send the notification to

    • Choose ‘All Channels’

  • Alert – The message body you want the user to see

  • Send When – The time you would like to send the notification

    • Choose ‘Send Now’

  • Title – The title of the notification

Click ‘Save Changes’ which will send the notification to the subscribed devices.

Setting up Recurring Notifications

  • Channel – Which channel to send the notification to

    • Choose ‘All Channels’ or ‘Specific Channel’

  • Alert – The message body you want the user to see

  • Send When – The time you would like to send the notification

    • Choose ‘Recurring’

    • Enter the Start Date, End Date, Cycle and Time of Day

  • Title – The title of the notification

Click ‘Save Changes’ which will send the notification to the subscribed devices.

That concludes this tutorial on Push Notifications.  Please feel free to leave a comment and let us know if this worked for you.

 

Shockoe Helps Homes.com House Hunters Find Perfect Rental

Shockoe Helps Homes.com House Hunters Find Perfect Rental

Mobile technology is changing the fundamental interactions between business and customers in meaningful ways not foreseen a decade ago.  Even a traditional business model, like car rentals, has been disrupted by a rapidly expanding company with what seemed a niche idea, due to the flexibility that mobile technology gives consumers.

Why can’t the same principle apply in the home rental space?

Homes.com is part of the fifth-largest real estate listing portal network with over three million homes represented in the United States and that’s the question that they asked us at Shockoe.com.

Since then, we have been working with Homes.com to enchance their collection of iOS and Android apps.  One of the first joint projects was released on October 16th to great acclaim.  Homes.com’s industry knowledge guided the thoughtful design and solid codebase that Shockoe supplied and the brand new Homes.com Rental app is averaging 4.9 out of 5 in the Google Play Store and 5/5 stars on the iOS App Store in just a week’s time.  And as a recent study showed, app ratings are now more critical to rankings, thus exposure, than ever before

So how did Shockoe and Homes.com do it?

The new Rentals app was built with today’s sophisticated renter in mind.  The app is the first in the market to offer current commute times for points of interest such as user’s place of employment, gym or shopping, tailoring the app to today’s ever busy consumer.  This of course hits the three keys to mobile real estate: geolocation, geolocation, geolocation.

Now, on-the-go consumers can easily browse an expansive database of rental listings on the Homes.com app, which has built-in extensions to Homes.com’s sister site ForRent.com.  ForRent.com is the exclusive provider of apartment listings on the Rentals app. Homes.com developed the smartphone app for effortless use on both iOS and Android devices and included iOS7 features such as natural navigation gestures.

“With year-over-year rental search traffic growing on Homes.com by more than 514 percent on mobile devices, our first priority in designing the rentals mobile app was to create an optimal shopping experience for renters,” said Brock MacLean, executive vice president of Homes.com. “The new app allows consumers to customize searches, instantly view and save listings, and connect with agents or property managers. Whether a renter is searching for a place to celebrate, create or unwind, the place to find it is Homes.com.”

The mobile app enables potential renters to tap into current listings filtered by user preferences.  Filters run from standards like price, size and type of residence to many extras like fireplaces, parking or (a mobile first for the industry) pet-friendly rentals. Map searches are made simple with slide and tap navigation, all while referencing a geo-targeted map for an easy view of points of interest throughout the search experience.

How did Shockoe create this for Homes.com in such a short timeframe?

From the beginning, Dominion tasked Shockoe with building the revisions in the Appcelerator Titanium codebase to create an amazing user experience across multiple operating systems and devices while improving overall app performance.  Rebuilding a unified codebase for Homes.com within Titanium offered Shockoe.com a chance to make big changes to simple usability and interface aspects of both mobile app experiences. For example, the older version of the mobile app made dynamic selection difficult in the area overview map.

Due to past experience, the Shockoe development team decided a whole new map design was necessary since the map function is a crucial. While it sounds daunting, we know it would end up being a major time saver since the redesign would be built just once in the Appcelerator Titanium toolset.  The new map function would then be instantly reflected across both iOS and Android versions for multiple form-factors and the functionality could be re-used and applied to other projects down the road for Homes.com.

Shockoe has been a longtime partner and evangelist of Appcelerator.  The cross-platform nature of Titanium enables us to meet deadlines and budgets that would be impossible had we designed for each platform separately.  Our experience with Titanium makes an already accelerated schedule even shorter.

We at Shockoe look forward to collaboration with Homes.com and their sister site ForRent.com in coming up with new and interesting ways to help the companies enhance products and tie themselves together in the mobile environment.  With an economical foundation on which to fortify their ability to acquire and cross-sell their customers in the mobile space, look for many more good things to come from the teams at Homes.com and ForRent.com.

How can Shockoe help your business take a great idea and make it a disruptive force in your industry?

Download the new Homes.com Rentals apps – [Google Play] [Apple App Store]

About Homes.com®
As one of North America’s top online real estate destinations, Homes.com® Rentals inspires consumers to dream big. From affordable houses to luxurious estates, condos, apartment rentals and more, Homes.com features nearly 3 million property listings and a user-friendly format, making finding your next home easy. Visitors to the Homes.com blog will find a collection of rich content and posts on DIY projects, painting, organization tips and more, providing the ultimate resource for everything home related. From finding your first apartment to buying your first home, upgrading, downsizing and everything in between, Homes.com is an inspiring and engaging partner in every phase of the home buying or renting process.

Homes.com is a division of Dominion Enterprises, a leading marketing services and publishing company headquartered in Norfolk, Virginia. For more information, visit www.dominionenterprises.com.

About ForRent.com®
As one of the nation’s leading online home search destinations, ForRent.com® inspires renters to discover their next apartment, loft, townhouse, or condo. ForRent.com features rental listings in a user-friendly format, making finding your next home an easy exploration. Visitors to ForRent.com’s apartment living blogFacebook pageTwitter account and Pinterest boards will discover relevant content and can join the conversation surrounding their home decorating style, rental tips and more, serving as the complete resource for renters in every part of their living experience.

Page 1 of 612345...Last »