Tag Archives: mobile development

App UI/UX Design on a Phablet, Struggle is real!

If you are a mobile UI/UX designer, life in the old’in days was fairly simple, you only had to concern yourself with a handful of screen sizes all around the 3-4″ size. Today is a different story. First with the Samsung Galaxy/Note series of phones, we were introduced to the phenomenon of Phablets, the merging of what were mini tablets and the smartphones, and Apple finally caught on to this trend 2 years ago with the iPhone 6 and 6S. Me, however, is slow to jump in so I am still sporting my iPhone 5.

So why am I writing this, yesterday I was on LinkedIn app ifor iOS which I am still working on accepting the more Facebook like and less career focus, but we cannot really blame the app, the trend of the service has moved that way, no I will not answer that math problem for the 1000th time, thank you very much, and the answer is always Please Excuse My Dear Aunt Sally!!!! Sorry, lost train of thought for a second there. Anyway, I was looking at a job advertisement, when I was trying to scroll through the page but the sucker would not move!

IMG_1534

I could not understand why. First, I thought it was just slow (I noticed this in their recent updates, especially on the Me tab), but even after waiting, still screen would not scroll.  I then Discovered what was going on… See the tab bar Highlights and Details? This is coded to stay at the top of the screen when you scroll past it.

IMG_1534.v2

You have to actually tap, hold and drag the small area between the page tabs and that app navigation bar –

IMG_1534.v3

If I were using a Phablet, This area would be larger, and probably closer in line with a more natural position, center of the screen, but due to the abnormal position, it is difficult to reach or even know that more information exists below.

So to my fellow UI/UX experts, remember that although Phablet is the new trend setter (particularly around 4.7″) we lonely 4″ and smaller folks are here to stay (thanks iPhone SE).

Advertisements

What is going on with my Twitter character count in iOS? The secret of the standardized URL

Ever wonder why the character count in the Twitter box jumps (or stays put) when you begin typing a URL in iOS share box? Wonder what the heck I’m talking about? Great question, take a moment and open a web page Safari on your iPhone (borrow a friend’s if you don’t have one) and go to Apple.com. Tapping on the Share icon located at the bottom of the screen will activate the Share and Action Sheet (best name I could find after a brief search across the web).

Shareicon

ShareActionSheet

Notice that you have a collection of Share and Action options. In this article, we will be focusing on Twitter.  Tap on it to activate the Share. NOTE: this assumes that you have a Twitter account and that account has been configured in the built-in Twitter feature of iOS framework, and no, sadly, having the Twitter app installed does not count.

Before we move forward, let’s quickly recheck our understanding of the crazy social world known as Twitter.  Twitter is built on a simple concept of short, sweet, messages, 140 characters long to be exact. That’s right, every thought, every dream, every fact, needs to fit in measly 140 characters or less (some studies even recommends to grab a persons attention, it should be under 100 characters!) to successfully post into Twitter. So now that we activate our Twitter share dialog, let’s take a look at it. There are several 3 key components:

  • The message
  • The optional image predefined by the programmer
  • Character Count

Let’s take a look at what we see on Apple.com

ShareTwitter1

Now as we take a closer look, we have a message Apple, an optional image and a character count that says… wait… 140 characters – Apple (5 characters) = 135 characters, but currently the dialog says I only have 112 characters left… what gives??

That is our lead into the point of this article. I will discuss 2 topics

  1. How to embed the URL (Developer point of view)
  2. Twitter’s link standardization

Continue reading

How to test Analytic tags (i.e. Omniture and Google) from Mobile Apps

Have you ever been tasked to test your company’s (or client’s) analytic tracking in the app but never knew how to even start?  Well I have great news of how to easily test it by following these simple steps.

Case 1: Adobe Omniture over HTTP

In this example, the development team have embedded Adobe Omniture tags for both click action and page views within an iOS app and we want to validate the output.  For Omniture, these messages are sent over the HTTP protocol. These instructions also assume you are running Windows machine, though same technique should work on Apple OSX as well.

  1. Go to Fiddler2.com (NOTE: not fiddler.com, goes to a private web site 😉 ) and download the free web debugging tool. I am currently running Windows 10, so I chose the .Net 4 version.
  2. Run Fiddler. In my case it was not listed in my Start menu (woohoo for start menu coming back officially in Windows 10!!!!), but you can easily run it by going to run command (Win+R) and running fiddler.
  3. Now we need to configure it to listen to traffic from your phone. To do so, follow these steps
    NOTE: For this to work, the phone must be running on Wifi, on the same subnet (router) as your computer.

    1. In Fiddler
      1. click on Tools -> Fiddler Options
      2. Select Connections
      3. Enter a unique Port. The default 8888 is an acceptable option but if multiple people are testing multiple devices in same network, you might want to change it.
      4. Additionally, we want to enable the option Allow remote computers to connect.
        Fiddler2ConfigWhen you select Allow remote computer to connect, you will receive the following dialog:
        warningaboutremoteconnectionClick OK
      5. Click OK to the options window, close Fiddler and reopen.
      6. You will be prompted about a Firewall access request, select to allow access.
        firewallaccessrequestYou have now configured fiddler, now, to configure your device. Before we do though, we need to get your computer’s current IP Address.
      7. Open Run command by hitting Win+R
      8. Enter CMD and hit run
      9. now type ipconfig in the command window.
      10. Many entries will appear, identify which connection you are currently using (wifi, ethernet…), basically whichever one has IPv4 Address populated and save the details for this entry –
        iPAddresslocation
    2. On your device (following is based on iOS)
      1. Go to Settings on your device
      2. Select WIFI
      3. On the WIFI network you are connected to (this must exist on same router/subnet as  your computer you configured above), tap the blue i on the left side of the bar. This will open the detailed settings of your wifi network.
        NetworkSettings
      4. Scroll to bottom of screen and tap Manual for the HTTP Proxy section of the screen. In the Server entry box, enter your IPv4 address you copied in an earlier step, and Port will be the entry you entered in Fiddler port configuration above.
        HTTPS2

Jump back to Fiddler and you should now begin seeing data entries displaying in Fiddler, these are from your phone.

Now that we have configured HTTP sniffer action, we now need to figure out how to read it.

  1. In Fiddler, you will notice many entries in the left frame –
    FidlerResults1
  2. Notice the entries listed in blue above, with the Host = *.sc.omtrdc.net This is Adobe Omniture calls.  Depending on your Omniture account, the Host URL could be slightly different.
    OmnitureResutls1
  3. Tap on one of these entries, and on the right frame of the application, tap Inspectors then Web Forms. This will display the HTTP call in a more easily read table format.
    WebView1
  4. In this app example, we are making 2 types of calls to Omniture, Page View and Click Action. Both examples are shown below:

    Page View
    PageName
    Click Action
    ClickActionsteps

Filter to display only Omniture entries

In Fiddler, you can easily filter future results by applying a filter. To do so

  1. In right panel, click on Filters and select Use Filters at top of screen.
  2. In the second drop down under Hosts select Show only the following Hosts
    FilterHeaderselection
  3. Enter your host your URL you identified above that calls Omniture in the box below the drop down.
    HostsURLsave
  4. Click on a different entry in left frame to save.
  5. In the action bar, click the black X and select Remove All, this will reset the results pane and only show Omniture calls.
    ClearResults

Case 2: How to receive HTTPS calls

In some (or many cases) a call is made using HTTPS, not HTTP (Google Analytics for example). To set this up, we need to perform additional steps to install a certificate on the device to decrypt HTTPS traffic.  This is done by completing these steps – http://docs.telerik.com/fiddler/configure-fiddler/tasks/ConfigureForiOS