Top 10 Challenges in Designing Mobile Apps

We all know this … we go through the app store looking for cool new and promising apps, download them and after a few seconds we recognize some odd bugs or become annoyed at the handling, always tap on the wrong button or simply don’t find what we are looking for. Some apps upset us even more as they are absolute energy guzzlers. We then often ask ourselves: Why is this app so complicated and whatever happened to usability? Well, to be honest, I don’t know the answer! But app users are merciless and fierce customers!

So if you are about to create your own app, you should avoid such pitfalls to prevent dissatisfied and unhappy users! That is why I created a Top 10 list of the challenges you might face when designing a mobile app and how you can overcome them. To provide you some real insights on the developers’ life, I sat down with Katja and Lars of the Berlin based startup bytecombo to talk about the challenges they faced when releasing their brand new game called “Bronko Blue, the Kitten Copter”.

 

1. Have an Idea!

Every mobile app starts with an idea – either a vague or already a concrete one. I’m not telling you anything new, but most of the greatest ideas just appear out of the blue. As people use apps to make their life a little more comfortable, productive and pleasant, the really big challenge is to have an idea that is awesome, innovative, and creative or exactly the app everyone was longing for. When already thinking about the designing and realization, remember that less is more! A fast, responsive, reliable and structured app working well in such an environment is better than a nice looking, super aesthetic, but instable or buggy app.

Nevertheless, before you start creating your app, you need to think of another very important aspect: your competitors! Without going into detail and just to drop some important keywords, try to answer the following questions:

  • Who is my target group?
  •  What is the aim of the app?
  • Which function does the app have?
  • Is the app absolutely new or does it improve an existing one or is it an add-on etc.? (Analyze the innovation level, do some research!)
  • Is there a market for the app? (Do a competitor and/or benchmark analysis or user survey!)
  • What will be the price of the app? (Analyze the profitability!)
  • Where will the app be sold? (Selling via the most popular app stores or via extra channels and other/own websites?)

 

 2. Know Your Target Group!

The main purpose of your app is to satisfy the users’ needs. This is key to get good reviews and ratings as well as high adoption rates resulting in numerous downloads. So detecting the right target group is essential! To do so, do not only rely on different analyses (see above), but also consider the behavior and knowledge of your potential users and the important skills necessary to use the app. Here potential questions are:

  • Which skills are necessary to use the app and is it necessary to have previous knowledge to use the app?
  • Are the potential app users novices, experienced or expert users?
  • What are your users usually up to?
  • Where do they get information on new mobile apps from?

Furthermore, your target group defines e.g. your business model, distribution channel, advertising as well as marketing strategy! As you can see it is of utmost importance to know your users!

 

3. Mind the Costs!

Besides your idea and knowing your potential users, there is one more essential challenge at the beginning: the costs. Because your financial as well as human resources define the frame of your app and hence both extend and duration of the realization process. Best here is to

  • have a clear financial concept and/or think of alternatives, such as private or crowd funding etc.,
  • define project members,
  • make a project plan,
  • create sub-projects (if possible),
  • set milestones and goals, and
  • define a budget – for the development and advertising of the app as well as for employees and unforeseen expenses.

You may find it helpful to consider lean development approaches to make sure you don’t over-develop your app at the beginning, but rather start with a “minimum viable product” that can be quickly developed.

To avoid high development costs, allow for a proper design or concept phase prior to the actual programming of your app. Sketching and deliberating your new app is the key success factor, which can be simplified with the use of rapid prototyping tools. Because prototyping is relatively inexpensive and allows you to optimize your app concept without having to invest in coding, you will start with a verified draft of your app, that “only” needs to be programmed, making later improvements redundant. This preserves everybody’s nerves, improves the relationship between programmers and designers and most of all saves precious time and money!

Costs and profitability go hand in hand. So you should also have a clear idea on how you offer your app:

  • Will it be an app that is available for free? Will there be advertising?
  • Will there be a free trial version that needs to be upgraded or that has extra features you can add by paying for them?
  • Will it be an app that will be sold for a small amount of money?
The Successful Way From an Idea to the Successful Release of the App

Prototyping: A safer way for getting from an idea to the successful release of an app

 

4. Detect Users’ Requirements!

After this first planning phase the design process can be initiated. Probably the best way to start off is by sketching your app ideas. Using rapid prototyping for this will breathe life into your idea. A huge advantage is that you immediately get an impression of what you are creating and by using clickable wireframes you will get a very precise idea of how your app will work and be handled. As the biggest concern is to satisfy the users, it is really important to detect the users’ requirements and to understand what the users need and want.

With the help of a prototyping tool you get the chance to create realistic, interactive prototypes that not only look, but also behave like your “real” app. As you can simulate your app prototypes, you can test your app prior the actual implementation  with test users or other collaborators. During this iterative designing process, you get immediate feedback. Both analyzing the user requirements and optimizing your app according to the users’ needs go hand in hand resulting in a great user experience.

 

5. Use Eye Candy!

Another challenge is to create a modern app fitting to today’s technological demands including a user-friendly handling, comprehensible usability and of course a pleasant experience. Therefore my simple advice here is: Use eye candy! This might sound a bit odd, but it is not self-evident! Screens are still in use, although they are not en vogue any more. Instead we have to internalize that transitions, animations and responsive design are the Zeitgeist. Swipe and pinch gestures support this easy and intuitive navigation behavior and make it an absolute must-have.

When embedding features and including elements, don’t forget about the user! Especially, when it comes to day to day use of apps. Because we need our fingers to do so – most of all our thumbs as recent studies show. This makes the so called “thumb zone” quite important, i.e. the part of the screen that you can easily reach with your thumb when holding the device in one hand. Since our fingers only have a limited span, you should keep this in mind and choose the position of important elements wisely.

“The Thumb Zone” of a mobile phone (based on the image by Oliver McGough in “Designing for Thumbs – The Thumb Zone”)

“The Thumb Zone” of a mobile phone (based on the image by Oliver McGough in “Designing for Thumbs – The Thumb Zone”)

 

Finally, there’s a huge difference between designing an application for a classic desktop computer that is operated via keyboard and mouse and designing an app for a mobile phone or tablet computer: Since the latter are usually operated via touch screens using our fingers, interactive elements such as buttons, links or icons must not only look nice but also be large enough so that the user can tap on them. So, especially on smartphone, the screen space must be used wisely.

 

6. Make it interactive!

Similar to the transitions and responsive design, interactions are a must-have! At the same time, they also constitute a time-consuming challenge during the design process and hence should be considered in advance! The main reason is that mobile devices are full of high-tech sensors and hence offer a wide range of opportunities. However, this is a great chance, as well to create a unique app. So make use of the sensors! Because interactions do not only include tap and swipe gestures, consider overlays that can present additional information or buttons that support various click options. Comprehensive “app experience” might be a good name in this context. So my advice here is to consider using more tangible interactions that  allow your app to respond to the environment, position and direction of the mobile device, such as shaking, flipping and tilting the device to trigger an action or to include GPS-based position data to overcome this challenge.

 

7. Make it clear!

An app should be self-explanatory since users don’t want to think when using an app. Furthermore, you should keep in mind that the functioning or handling of the app might be clear to you (as the inventor), but this doesn’t necessarily apply to your users. The use of a simple and clear structure can help deal with this challenge. Also don’t forget about intuitive handling! Most of all, give brief instructions on what to do and how it is done. If necessary, embed or link tutorials giving additional help and support on certain tasks. Icons and thumbnails are a nice way to present information in a very compact manner, too. But be cautious! Too many icons can confuse your user, especially if you introduce icons that don’t correspond to native UI elements (such as a Play button, left/right arrows, envelope etc.). To avoid confusion, you can have a look at the respective operating systems (iOS, Android or Windows) or relevant and most downloaded apps (e.g. different social media networks) to see what symbols they use. Platforms like Appli’s iOS, Google’s Android or Microsoft’s Windows Phone also provide more or less detailed UI guidelines for app developers that will help you choose UI patterns your users will already be familiar with.

 

8. Create Empathy

Curiosity, creativity and loads of innovative potential keep the ecosystem of mobile apps on a constantly high level and make the market change rapidly. That is why a strong and healthy relationship to your users is essential. It’s all about the positive first impression and wellbeing. This is absolutely essential to relationships – either for people or for products. So make the user feel comfortable. You can’t only achieve this by having an app brimming over with user friendly, interactive features, but also with e.g. a recognizable and memorable design, colors, logo or typical fonts. Maybe answering the following questions will help you as well:

  • What are the core UI elements of your app?
  • Are there already user stories you can rely on?
  • How and where do I attract potential app users?

You may and even should have a look at your competitors and the overall market, not in order to copy your competitors’ app design or structure, but to create something new and unique without reinventing the wheel. Most of all: you want happy and loyal users. Being there for them, listening to their problems when using your app (be aware that there’s always a tiny mistake or bug and someone who finds it) and providing immediate help, are the key to your users’ hearts. It’s all about your users’ empathy and you need to win it!

 

9. Performance vs. Battery Lifetime

When designing an app, layout and structure are only one side of the coin. But its performance and the energy used for this are the other side. The challenge here is not only to design a nice app; it’s about having an app that runs smoothly without any bugs and which is not an annoying energy guzzler. But often, performance and feasibility of the app are believed to be the exclusive responsibility of the developers. That is the main reason for their late consideration during the design process. Additionally, the performance of an app on a mobile device is perceived differently by many users, but in general it’s based on loading times and behaviors, if and how smooth transitions and animations run, the amount of errors, bugs and crashes occurring etc. Asking your developers to join your prototyping efforts or to set up a beta version to run previous tests with test users will help avoid such trouble.

Another aspect are the devices themselves! Your new app might function well on the newest mobile device, but there are also users with older devices out there! Too many visual effects, integrated sensors, images or anything else requiring high temporary buffer and flooding your cache might lead to a bad or disruptive performance.

 

 10. Different Devices and Different Operating Systems

As already mentioned, your users will probably have many different devices with different screen sizes, especially if you are designing for multiple platforms. So designing an app for the latest device only can be a huge mistake. Apps should run on as many devices as possible – at least if you want to attract as many users as possible. Creating an app suitable for every device is a really big challenge then, too. Because the countless mobile devices bear several restrictions and limitations based on system requirements, embedded technologies, different sizes, pixel intensities, screen dimensions etc. Although this sounds like an odd buzzword, responsive design can make life a little easier. Considering this, screens get more liquidity and thus can be adjusted to the various screens and formats of the devices.

In contrast to desktop or even tablet computers, the screen space of mobile phones is rather limited. The smaller dimensions of smartphones pose a particular challenge to mobile designers, since the screen footprint will usually force them to cut down on features and sometimes even content as well as make smart choices about navigation. Especially when developing a mobile app to go with an existing website or web app, this can be challenging as the natural impulse is to require the mobile app to have the same functions and options.

Finally, it’s not only about the devices themselves, but also about their operating systems. The three main systems, iOS, Windows or Android, have their very own patterns and UI objects and regular updates have become “normal”. So be prepared, there will be bugs requiring fixing on a regular basis. Actually this might be the biggest and most time-consuming challenge in this context.

In terms of such technical challenges a proper testing phase or even a Beta version may be helpful and should be considered.

 

All in all, it’s about making your mobile app unique, appealing, effective, and pleasurable and of course memorable! It might be quite a difficult and even long challenge. There might be some obstacles in your way to the launch as well, but as we all know there are many mobile apps available out there, which are both real user magnets and incredible success stories.

Challenges of Mobile Designing and Ways to Create Unique Apps for Happy Users

Challenges of mobile app design and how to create unique apps that make users happy

 

To put the above-mentioned challenges into perspective, I spoke to the  founders of bytecombo, Katja and Lars, who can tell tales about the challenges emerging on the way to the release of a mobile app. On July 26, 2014 their new online game called “Bronko Blue, the Kitten Copter” was launched on the international games market. This indie game is about a cute cat called “Bronko” who is totally in love with his balls of wool. Every morning he sits down to count his wooly treasures, but one night some of the balls get blown away and the horrible trouble starts all over the next day. Suspecting the mean cows he makes a plan to get back his riches. So, in the full version, this side scroller is a challenging journey during which Bronko has to fight cows and windmills, ram or shoot stones and fly through the different seasons of the year.

"Bronko Blue, the Kitten Copter"

“Bronko Blue, the Kitten Copter”

Here’s what Katja and Lars told me about the challenges they experienced in the past months:

How do you feel now that “Bronko” frolics through the virtual worlds?

Katja: Relieved, excited and frightened all at the same time. Relieved because it took us longer than expected to finish the game. Excited to know how people will like the game and what will become of “Bronko”. Frightened that “Bronko” might not be found in the mass of games or even worse people won’t like it.

 

From the very first idea to the release last Sunday, how long have you been working on “Bronko“?

Lars: At the beginning we just wanted to make a small game similar to “Flappy Bird” and planned a developing phase of three months. But when working on it, we had so many new ideas every day that time flew by.

Katja: At the end we worked for one year, we spent two days a week on it, to finish and publish the game on several platforms. While the actual programming was done within three to four months, steps like marketing, fixing cross platform issues, fine-tuning and optimizing the concept took a lot more time than expected.

 

Let’s talk about the challenges. Which were the biggest challenges for you during the design and release process?

Lars: There have been a lot of challenges along the way. For example, there’s the cross platform issue. Choosing the right technology for game development was one of the hardest steps since there are plenty of options. We decided to develop cross platform using a language called HAXE and on top of it the frameworks OpenFL and HaxeFlixel. In theory to develop on a cross platform is a perfect solution. You develop it only once and then publish to several platforms. In reality we had a lot of trouble to get the game running stable on each platform. It took us at least as long to fix the cross platform problems as it took us to develop the actual game.

Katja: Another challenge is or was keeping calm. Like “Bronko” we had some impediments on our way. But to keep calm and get on with it sometimes proved to be very hard. As we are no marketing experts at all, this was another challenge for us. So we had to do a lot of research on what to do and when. Especially with a small budget. Fortunately there are a lot of resources out there on the internet.

Lars: Another difficulty was getting proper feedback. It proved to be a lot more difficult to get feedback while developing than expected. Especially from friends and family as people are very nice about things and criticism isn’t always very specific. And of course from other gamers and developers as you can get useful feedback like bug reports, but more often it’s only a negative or positive rating which doesn’t help a lot.

 

Which advice would you give to other developers planning to create and release a game for mobile devices?

Katja: Since you can’t be sure if you will finally succeed, you should love what you are doing. Love playing games, love being creative, love implementing and even love promoting it. What you need is patience and in the best case a plan “B”, for example for the funding.

 

Now that “Bronko“ has been released, do you already have new games or app ideas?

Lars: Yes, actually we do have a lot of new ideas. Next we will create four prototypes for new games, which will be smaller ones than “Bronko Blue”.

 

Looking back one year from today, would you do it again?

Katja: Definitely, as many problems as occurred as many new experience we gathered.

Lars: And most of all, we had so much fun on the way to the release.

 

About bytecombo:

The Berlin based startup was founded in 2013 by Katja and Lars, who are in love with licorice, coffee, and good mobile games. They are passionate about innovative, small indie games with nice and simple graphics. And that’s exactly what the likeable duo wants to develop.

 

If you are curious about the Bronko’s adventures have a look at their website: bytecombo.com, stop by at the Facebook profile or download the game in the respectively well-known stores and go on crazy adventures with the cute little cat. To get a little impression of the game, here’s the latest trailer:

For more detailed reading on the different challenges of designing a mobile application check out the following links to related articles, blog posts and books.

 

“Designing for Thumbs – The Thumb Zone” by Oliver McGough

“Designing Mobile Apps, Where to Start?” by António Pratas

“What Does it Take to be a Mobile Designer Today?” by Sergio Nouvel

“User Experience is Integral to Winning App Design” by Rahul Varshneya

“5 Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before” by David Fay

“Mobile: Native Apps, Web Apps, and Hybrid Apps” by Raluca Budiu

“Seven Guidelines For Designing High-Performance Mobile User Experiences” by Ivo Weevres

“How to design a mobile app.” by Alexander Kirov

 

Books:

“A Project Guide to UX Design: For user experience designers in the field or in the making” by Russ Unger, Carolyn Chandler

“Interactive Design: An Introduction to the Theory and Application of User-Centered Design” by Andy Pratt, Jason Nunes

“Smashing UX Design: Foundations for Designing Online User Experiences” by Jesmond Allen, James Chudley

“Designing Apps for Success: Developing Consistent App Design Practices” by Matthew David, Chris Murman

“The UX Book: Process and Guidelines for Ensuring a Quality User Experience” by Rex Hartson, Pardha S. Pyla

 

How To … Simulate Device Motions in Your Prototypes

Modern mobile devices, e.g. your smartphone, are quite powerful. They are little computers with both a high capacity and a high sensitivity. One might even say they have razor-sharp senses including the best eyes and ears and a brilliant sense of balance -all because of the multiple sensors, which are embedded in a mobile device. It is quite impressive how many sensors some devices include nowadays: Environment sensors like the barometer, thermometer or light and proximity sensor measure different properties and environmental parameters of your mobile device, motion sensors such as the accelerometer, gravity sensor or gyroscope measure acceleration and rotational forces, while position and orientation sensors measure the device’s physical position using magnetometers, GPS or compass features. Further sensors are of course the microphone, the camera, and the touch screen, which probably are the best-known sensors, not to forget sensors like the finger print scanner, as well as WLAN and GSM antennas and finally Near Field Communication (NFC) and Bluetooth. The picture below provides a nice overview of the various sensors.

Overview of common mobile device sensors

Overview of common mobile device sensors. Source: Inter Free Press via Wikimedia Commons, licensed under Creative Commons Attribution 2.0 Generic

 

These sensors enable a wide range of great functions, e.g. light and proximity sensors tell the device to lock the screen when you hold it to your ear during a phone call in order to prevent accidental touch gestures, while the accelerometer is used when you turn your mobile device and the screen orientation changes from portrait to landscape. But these sensors also provide a host of novel opportunities as they can be applied to a great variety of domains, such as healthcare, safety or transportation and social networks. Furthermore, these sensors are useful in improving the user interface, in providing LBS and helping to detect and use environmental data. Examples include fitness apps that make use of the GPS sensor to track your route or apps tracking eye movement across the display using the built-in camera. Some apps using sensors can be real life-savers: Patients suffering from Alzheimer’s disease or dementia can use apps that track their locations via GPS and inform family members when they leave a certain route.

It is only natural that with so many options available, developers want to make use of them. And if you can create such beautiful apps, your prototypes should also be able to simulate them. So, why not use these opportunities in your prototypes? Here’s how!

 

Creating a prototype that reacts to device motions

To demonstrate how to create a prototype that can react to device motions I created a small interactive gaming prototype for mobile phones, which I called “Fortune & Destiny”*. There are two modes: Dice of Fortune (which will give you a score) and Dice of Destiny (which will give you an answer to a question). Shaking or tilting the phone will roll the dice and present you a result after giving a signal (vibration). So here is how it goes …

Preview of my prototype "Fortune & Destiny"

Preview of example prototype “Fortune & Destiny” (in landscape Format)

Step 1: Create the prototype pages

As usual, we start by building a basic prototype that includes the various pages used in the application. In my example I need a start page (actually, I have created two pages – one for portrait and one for landscape orientation), a page to choose between the two modes, an instructions page for each mode, and a page showing me the result (actually, I need one page per result I wish to simulate).

Now that we have created all the pages (you don’t know how to create overlays anymore, have a look here), let’s add some interactions that will use some the sensors in our mobile device. In this prototype we will mostly make use of the accelerometer.

Screenflow of "Fortune & Destiny"

Screenflow of “Fortune & Destiny”

Step 2: Add a “Turn Device” interaction

Interactions in Pidoco always consists of a pair of User Action and System Reaction (check out our blog post on Extended Interactions or have a look at our Glossary for more information). Let’s start adding the first device motion interaction. First, let’s connect the two start pages (see screenflow above) with a “turns the device” interaction so that the user can switch between the portrait and landscape view by turning his device. To do so, open the Context Menu of the portrait start page, select the Interactions tab, click on Add Interaction and the Interaction Dialog will open.

Accessing the page context menu via the Breadcrumb Navigation

Accessing the page context menu via the Breadcrumb Navigation

In the left column, choose “turns the device” from the dropdown and select “Turns to Landscape”. To have the landscape start page displayed as a result, pick “show page” as a reaction in the right column (then) and select the appropriate page from the Page/URL dropdown. You can add an animation and maybe also a delay to it. Here, I decided on “slide in from left”. That’s it. Now we can proceed with the next interaction.

Interaction Dialog for the User Action "Turns the Device"

Interaction Dialog showing the settings for a “Turns the Device” interaction

 

Step 3: Add “Shake Device” interactions

As this prototype is about dice, we want to simulate real dice rolling! Let’s make it a bit advanced and create a reaction chain. To do so, shaking the mobile device seems to be a good way. At first, we start with the sound of rolling dice, which I recorded in advance. Again, open the Interaction Dialog of the page from where the user will roll the dice and select “Shakes the device” as the trigger action and define the Intensity (lightly, medium or heavily) and shaking Duration the user needs to apply to trigger a reaction. I chose a light shaking intensity for only one second to make it easy for the user. Now add the System Reaction. As an example, I decided on three reactions: the sound of dice, a vibration signal (vibration) for the shake feedback and the display of the result page. To add a sound, select “play a sound” and upload it as an MP3 from the respective drive by selecting it and clicking on the upload button (please mind copyright and make sure you own the rights of it!). If only part of the sound should be played, define the Duration. If you leave this field empty, the entire sound is played, which is what I have chosen in this case.

Add the System Reaction "Play A Sound"

Interaction Dialog showing how to add a “Play A Sound” system reaction

To add a vibration signal select “vibrate” in the reaction dropdown (“then“) and define both the Duration (here: two seconds) and, if desired, a Delay. To display the result page, select “show page”, select the respective page and define any desired animation, additional option or potential delay.

Add the System Reactions "Vibrate" and "Show Page"

Interaction Dialog showing how to add “Vibrate” and “Show Page” system reactions

I did this for all my “Dice of Fortune” pages. Furthermore, I decided to use delays to create a sequence of System Reactions and to get a more realistic feeling.

 

Step 4: Add a “Tilt Device” interaction

For the “Dice of Destiny” pages, another function of the accelerometer can be used – tilting the mobile device to make it look more like cards. To add this Interaction to your prototype page, repeat the steps described in Step 3, but select “tilts the device” as the trigger and define the tilting direction (left, right, up and/or down), the movement to be made (forward and/or backward) and finally the tilt angle. For the System Reaction, I have selected a vibration and the display of a result page. I applied these interactions to all of my “Dice of Destiny” pages and varied the parameters (tilt angle, movement, and direction) to give you an impression of all the potential setting you can chose. If you play cards, you usually throw or tilt your cards in different angles and directions anyways, so these variants make the simulation more realistic. Finally, you may have already noticed I added a sound again. This time, it is the sound of cards, which I had previously recorded.

Add the Multiple System Reactions to the User Action "Tilts the Device"

Interaction Dialog showing a set of multiple System Reactions to the User Action “Tilts the Device”

 

That’s it! You have successfully created an interactive prototype that can simulate how the app reacts to device motions! Do you need help with adding device motions to your prototypes? Just send us a message via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

 

In my next column I will make use of even more sensors and show you how to integrate location data and maps (GPS) into your prototypes.

 

PS: If you would like to read more about sensors in mobile devices and about apps used in healthcare, have a look here:

Mobile Phone Sensors in Health Applications by E. Stankevich, I. Paramonov, I. Timofeev

Improving Health Care Through Mobile Medical Devices and Sensors by D. M. West

Sensors Overview (in the API Guides) by the Android Developers

 

 

* Please note: To view this prototype you need to be logged in to your Pidoco account. You can also test this mobile prototype on your mobile device.

How To … Create Touch Gestures and Screen Transitions?

Can you think of an app that does not have any touch gestures? I cannot and actually think that they are essential nowadays. With Pidoco’s new Extended Interactions you can now add touch gestures, screen transitions, device movements, location data and many more to your prototypes. In this series of blog posts I will guide you through how to use our new features in the next weeks. Today I want to start off by showing you how to add touch gestures and screen transitions to your prototypes. So here is how it goes …

To make this how-to a little more tangible, we will go through an example. Let’s imagine we want to build a prototype of a mobile app with which you can view videos and pictures you have taken – a digital photo album. The pictures and videos are grouped in galleries. To look at them, you can open the galleries by tapping on them. An overlay opens and you can have a look at the content by clicking or swiping through it – like a film strip. The prototype could look like the sample prototype below, which I will call “My Gallery” *.

Preview of my Gallery App

Preview of “My Gallery”

Let’s see how to create such an interactive prototype!

 

Step 1: Create your mobile prototype.

Before we can start adding rich interactions to our prototype, we need a prototype. First, create a new prototype. Then create the different main pages and add the required elements to them. Then add links between the screens as usual. If elements should be reused on several pages (like the header and footer in my app), use the Global Layer function.

Screenflow of "My Gallery"

Screenflow of “My Gallery”

Now that we have our basic prototype set up, we can start adding more interactions.

 

Step 2: Add touch gestures

Touch gestures can easily be added to various elements like stencils or entire pages using the Interaction Dialog. Let’s commence with the first interaction by creating a tap action to link the element “My Pictures” with the corresponding page. To do so, open the Context Menu of the rectangle “My Pictures”, click on the “Interactions” tab and finally on “Add Interaction“. This will open the Interaction Dialog. In the Interaction Dialog select “taps” as the interaction trigger and define the number of fingers to be used. Then choose “show page” as the system reaction and select the target page to link to (here:“My Pictures”). Under “Options” you can define how the next page will be displayed. “Instant link” lets you go to the next page without reloading and can be used for AJAX-style simulations.

To make it look a little nicer, we can add an Animation. To do so, simply select the desired animation from the dropdown. I have chosen “Slide in from top” (Hint: Have a look at Step 4 to select the right gesture directions).

You can add several interactions to an element as shown below.

Add Tap Gestures to the "My Gallery"

Add Tap Gestures to the “My Gallery”

 

Step 3: Add overlays

On the page “My Pictures” we would like to have an overlay that opens when the user taps on a gallery. Within the overlay, we want to display a sequence of pictures (or videos) that the user can scroll through.

To create an overlay, we need to define the content of the overlay on a separate prototype page. So, let’s create a new page for the overlay. When including overlays, do not forget that they are usually a little smaller than the normal pages. You can adjust the page size via the Context Menu of the respective page, for example in the breadcrumb navigation.

Now we need to add a new tap interaction to the gallery elements. To do so, select the trigger element (here: the image called “Gallery 1”) and add a new interaction via the Context Menu. In the Interaction Dialog, choose the “taps” as the user action and the “show overlay” a the system reaction. Then select the overlay page as content to be shown (here: Gallery 1 – Pic 1). This will show an overlay on the “My Pictures” page when the respective image is tapped. You can add this type of interaction to all gallery images.

Add Overlay

Add an Overlay to “My Gallery”

Now we would like to allow the user to scroll through all images of the gallery. For this, we need several more overlay pages (one for each picture) that will be linked in a certain order to allow the user to scroll through. We also need a forward/backward option on each overlay. Let’s start with the first overlay page (here: Gallery 1 – Pic 2). Add an image and little arrows to it to allow the user to click through. Finally, add tap actions to these arrows to link the previous and next gallery picture. Do this for each own overlay page.

To allow the images to be clicked through within the same overlay frame without reloading the entire background page, do not forget to select the option “instant link within same frame” when linking the individual overlay pages. This will allow you to show the next image within the overlay without reloading the background page in the simulation!

 

Step 4: Add swipe gestures

Now we would like to make the image gallery a little fancier by allowing users to swipe to see the next image. To do this, we need to add some swipe interactions. Open the Context Menu of the picture on the first overlay and click on “Add Interaction” (or add the swipe gesture to the overlay page directly). In the Interaction Dialog select the “swipes” as the user action. As we want to scroll towards the next image on the right, the user must swipe to the left, i.e. the swipe direction must be set to “left“. Select “show page” as the system reaction and pick the next overlay page from the “Page/URL” dropdown. To show the next image within the overlay choose the display option “instant link within same frame“. If we want to swipe back and forth (e.g. on images in the middle of the gallery), we need to add two interactions to the picture (one to swipe left and one to swipe right).

Add a Swipe Gesture

Add a Swipe Gesture to “My Gallery”

Finally, we need an option to close the overlay and end the slide show, so that we can go back to our starting page (here: “My Pictures”). For this, add an “Close” icon (to be found in Icon Stencils in the “Symbols” section) at the top right of the overlay and add the interaction pair “When the user taps, then hide overlay“.

Hint: If you have multiple pictures and want to display the “Close” icon on every overlay page, use the Copy & Paste function to copy the arrows and icon to every overlay and simply change the Page/URL on each overlay.

 

Step 5: Add screen transitions (animations)

Now we’re almost done. But there’s a final touch we can add. Let’s use animations like “slide in” to simulate page transitions from one image to he next. To do so, go back to the overlay pages and find the “swipe” interactions in the “My Interactions” panel on the right. Selecting an interaction will open the Interaction Dialog. There you can add an animation to the system reaction. Use “slide in from right” for “swipe left” interactions and “slide in from left” for the “swipe right” interactions.

Interaction Dialog of Overlay

Interaction Dialog of  the Overlay

Now you can add some more touch and swipe gestures to the app to make the page “My Videos” as well as the headers and footers and the galleries not containing pictures so far interactive.

For example, I added a pinch action to the element “Latest Drawing” in the “Picture Gallery” , too. To do so, open the Context Menu and select the User Action “pinches” and chose the direction “pinch out” to create the impression that the element gets enlarged. As an overlay should pop up, define the System Reaction “show overlay” and link the respective page. To minimize the drawing in the overlay again, use the Action Area stencil in the overlay “Free Drawings”. After adjusting the width and height of if, open the Interaction Dialog and select the pairing “pinches” and “hide overlay”. (The overlay can still be closed with the “Close” icon.)

Add an Action Area

Add an Action Area

So far, a tap on a gallery opened an overlay. But to point out that the “Drawings” are opened by a pinch action, we can add a system alert to the “Latest Drawings” element on the page “My Pictures”. To do so, open the Interaction Dialog of the Rectangle, select the pairing “When the user taps, then show a system alert” and simply insert your message (here: Pinch! Pinch to enlarge your latest drawing!).

 

That’s it! We have successfully created an interactive prototype with touch gestures and screen transitions! Do you need help with creating interactions? Just drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

 

In my next column I will show you how to add device motions to your prototypes and will tell you more about the sensors embedded in your mobile devices.

 

* Please note: To view this prototype you need to be logged in to your Pidoco account. You can also test this mobile prototype on your mobile device. I configured it for the iPad.

Pushing the Limits of Prototyping: Extended Interactions

Here at Pidoco we’ve been hard at work to bring to you some exciting new features that push the boundaries of prototyping as you may know it. With this post we proudly announce our latest release featuring “Extended Interactions” that provide you with a powerful way to prototype modern web and mobile applications.

Extended Interactions

Extended Interactions allow you to go beyond traditional click type interactions and leverage the full range of interactivity available on PCs and mobile devices like smartphones or tablets. With Pidoco you can now:

  • prototype touch gestures like swipe or pinch
  • simulate screen transitions like slide in or fade
  • define new system reactions like alerts, browser back or playback of sounds
  • let prototypes react to device movements like tilting, orientation changes or shaking
  • incorporate location data (e.g. GPS) to simulate location-based services
  • use parameters like direction or angle to refine interactions
  • choreograph complex interactions using multiple reactions and delays

With these new possibilities you will be able to create even more realistic prototypes and test a much wider range of applications and features before you go ahead and build them. Examples include interactive sightseeing tour guides or rental car finder apps utilizing location data, mobile applications utilizing touch interactions, or health apps responding to shaking a mobile phone. Since touch gestures and device movements are a great way to make interacting with technology more natural and tangible for users, we have dubbed these features “Tangible Interactions“.

Code-free Prototyping

As always you will be able to use Extended Interactions entirely without writing a single line of code. Rich interactions are easily defined via the new Interaction Dialog by selecting pairs of User Actions and System Reactions from a wide range of options. A set of parameters allows you to refine these interactions using, for example, animations, delays or defining directions. You can also combine multiple reactions to compose complex sequences of reactions, for example, to build a slide show.

Extended Interactions with Pidoco: Adding rich interactions to your prototypes is easy.

Extended Interactions with Pidoco: Adding rich interactions to your prototypes is easy.

In our Enterprise Edition you can combine these new options with our scripting module, which opens up almost infinite possibilities as it allows you to add your own code snippets to your prototypes.

Simulation on Mobile Devices

Together with our Extended Interactions we have also released a new version of our mobile app, which allows you to simulate your prototypes directly on iOS and Android smartphones and tablets to test drive your apps immediately. All it takes is sharing a link or logging in via the Pidoco App, which you can get directly in the respective app stores (get the iOS version here, get the Android version here). The new app is able to use inputs from the various sensors of the mobile device in order to simulate your prototypes. Enjoy!

 

Try it now at pidoco.com. Happy Prototyping!

 

If you need help or have questions, just drop us a line at support@pidoco.com, give us a call or contact us via Facebook or Twitter. We are happy to help you! You are not a Pidoco user, yet? Why not register for a free 31-day trial today?

 

How To … Crop Images

Looking for more fidelity in your prototypes? Pidoco allows you to upload images to add design elements and content to your prototypes, e.g. logos, graphics or entire screenshots. But sometimes, the uploaded image is too large or you only need a particular part. So the only option is to crop it. But worry not! With Pidoco, you can crop your images right where you need it – directly in your prototype. And here is how it works…

 

Step 1: Upload image

Before you can edit and crop an image in your prototype, you have to upload one first. To upload an image, open your prototype. Open any page and scroll down to the My Images section of the Stencil Palette. Click the Add Custom Images link to open the Upload Dialog. Depending on your image source, you can either upload your image from a local drive by clicking the Browse…” button or inserting the link from an external source and then clicking on Add. The image may take a few seconds to upload. The uploaded image will appear in the My Images section of the Stencil Palette. You can drag the image onto the canvas like any other stencil.

Pidoco My Images Section

Upload images using the My Images section of the Stencil Palette

 

Pidoco Image Upload Dialog

Select images for uploading using the Pidoco Image Upload dialog

 

Step 2: Crop image

Once you have inserted your image into your prototype page, you can start editing it. To crop your image, start by selecting it with your mouse. Little sizing handles will appear at the edges and corners of the image, which allow you to resize it. Now press the “Ctrl” key on your keyboard and drag the sizing handles to crop the image. Keep the “Ctrl” key pressed until you are done cropping.

Image Cropping in Pidoco

Crop uploaded images using the Ctrl key and your mouse

Done! That’s how easy it is to trim your uploaded images to just the right size or portion. Of course, you can undo any cropping later on by “un-cropping” the image, i.e. pressing the Ctrl key and returning the sizing handles to the original position. The original of the image in the Stencil Palette will not be affected by your cropping, so you can return to the original at any time. To duplicate the cropped images, just copy and paste it wherever you need it.

 

Other editing options

You can also re-size your images or add borders via the Context Menu.  Find shortcuts for cropping and scaling images in our Keyboard Shortcut Survival Kit.

 

Do you need help with cropping your images? Contact us via support@pidoco.com or Facebook and Twitter.

Log in to Pidoco with XING

We are happy to announce that you can now sign up and log in to Pidoco using your XING profile!

We have teamed up with XING, the social networking platform for professionals, to make access to pidoco.com even easier for users with an existing XING profile. With the new “Login with XING” plug-in you can now use your XING login details to access Pidoco! Even if you are not yet a Pidoco user, you can complete the sign-up process with your XING login.

 

Log in to Pidoco with your XING profile

Log in to Pidoco with your XING profile

 

Have a XING profile? Then try it out today. Just go to pidoco.com and chose your prefered way to access the world of prototypes!

If you need further help, feel free to contact us via support@pidoco.com, give us a call or contact us via Facebook or Twitter. We are happy to help you!

Happy Prototyping!

More Prototyping Fun!

This June is a really exciting month for us, because we have some great updates for you! We are starting off with the announcement of our new pricing model: Starting today, our brand new per-project pricing will replace the previous – Basic, Classic, Expert – system. With the new plans, users will only pay for the number of prototyping projects they need and will be able to add users to their respective plans without additional cost. In addition, all our users will be able to benefit from our full feature set – real-time collaboration, commenting, specification exports, mobile prototypes, templates and much more.  Check out our new plans here.

You already have a Pidoco plan that you like? Don’t worry. Existing plans are not affected by this change, so you can keep using your current plan. When you are ready to upgrade, you can simply do so in your Pidoco account. (Please note that it will not be possible to reactivate plans under the old pricing model once they have expired or been terminated.)

You are excited about this update, but don’t have a plan yet? Then head over to pidoco.com and get your free 31-day trial today.

For more information check out the details of our new per-project pricing or contact us via email at support@pidoco.com. We are happy to help you!

Happy Prototyping!

Soccer World Cup Special

It’s time to get soccer-crazy again as the World Cup in Brazil is about to commence!  You are not in the right mood yet, because learning Samba moves is quite difficult, you do not know how to play on the Combinho or you simply cannot kick it like Ronaldo, Messi or Neymar? Well, here is something to cheer you up.

We at Pidoco have already placed our bets… So now it is up to you! Who will win the Soccer World Cup 2014? Guess the World Cup champion and win a one-year Pidoco Expert Mobile license! All you have to do is follow these 3 simple steps:

1. Like our profile on Facebook or Google+ or follow us on Twitter.
2. Pick the winning country.
3. Send us the name of the country you think will win the World Cup by sharing this post, commenting on it or by sending a tweet including @pidoco before 12 June 2014. (Please note: Posts have to be shared publicly so that we will see them.)

 

World Cup-2

We will give away one Expert Mobile license to a participant who has correctly predicted the World Cup winner after the finale on 13 July 2014! (If we have received several correct predictions, we will randomly select a winner.)

Good luck and Boa sorte!

Pidoco at the first tools Expo + Conference 2014

For the seventh time in May, the German capital Berlin became Europe’s biggest digital hotspot hosting one of the largest festivals of the entire IT scene – the Berlin Web Week. Cracking the attendance record, 18.000 visitors participated in this year’s numerous workshops, hackathons, and bar camps and visited the many different events such as the NEXT Berlin or re:publica.

As this exciting festival constantly evolves, the tools Expo + Conference has joined the line-up as a new showroom event. The first tools ever took place on 7 and 8 May 2014 in Berlin’s venerable ExpoCenter City right next to the impressive Funkturm. We already reported on this new event in April, which we were happy to support in bringing together a wide range of different companies and industries united under the slogan “build your digital business”. Since the first tools offered a new concept focusing on businesses seeking web applications to leverage the power of digital business processes, we were quite curious what to expect.

Berlin Funkturm next to ExpoCity Center in Berlin

Berlin Funkturm next to ExpoCity Center in Berlin

After loading the car and making it through Berlin’s rush hour traffic on Tuesday afternoon, we set up a comfy Pidoco booth featuring a set of lounge chairs for our visitors and prepared everything for the upcoming two days. Following some early meetings at our booth, Wednesday kicked off with our workshop titled “Rapid Prototyping & Usability Testing”. During this 30 minute power testing workshop, participants had the change to learn how they could easily create their own interactive mobile prototypes and use them for quick and inexpensive usability tests. Aside from a host of useful tips and hints on how to design a suitable test scenario and running a usability test, participants were able to test drive Pidoco on the laptops provided on site.

Pidoco's booth at tools Expo + Conference 2014

Pidoco’s booth at tools Expo + Conference 2014

During both days, we had the opportunity to connect with a very engaged audience and talk to both visitors and potential partners. Those quality conversations and discussions were really inspiring and offered some great feedback, especially in regard to our new features soon to arrive, which will make prototyping even more powerful. At the same time, tools 2014 was a great opportunity for us to socialize, to network with new and existing customers as well as to meet up with old friends and partners.

We enjoyed tools 2014 and would like to thank all of you, who visited us during these two days in the Expo Center City in Berlin. A big thank you also goes out to the organizers for creating this new event and to SIBB e.V., the ICT & Digital Business Association of Berlin-Brandenburg, who were responsible for the booth we were part of!

Tools 2014 at the ExpoCity Center at Messe Berlin

 

Pidoco Keyboard Shortcut Survival Kit

Shortcuts are awesome and make life much easier – even if you are not a power prototyper.

But you don’t have to start looking for shortcuts that work with Pidoco, because we have already created a handy keyboard shortcut survival kit for you! So check it out, print it, and pin it to your desk to save precious working time!

Pidoco Keyboard Shortcut Survial Kit Pidoco Keyboard Shortcut Survial Kit

 Download Keyboard Shortcut Survial Kit

 

If you’re using a Mac, here’s your survival kit:

Pidoco Keyboard Shortcut Survial Kit for Mac Pidoco Keyboard Shortcut Survial Kit for Mac

 Download Keyboard Shortcut Survial Kit for Mac

 

HAPPY PROTOTYPING!