Tag Archives: technology

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

Surface Book: Initial thoughts on storage and why OneDrive failed us

First off…. kudos to MS for building what looks like to be an amazing machine (sorry, not “work of work” due to the weird “snake hinge” as commentary at The Verge called it).  The Surface Book is beyond what I imagined and a real surprise as many were just expecting a larger Surface tablet. If  you are not familiar with the Surface Book, read up on Microsoft, or as I prefer more, The Verge.

you can see my feedback during the unveiling below

surfacebookannounce

Once they detached the screen, I completely freaked out as many and many others did so as well.  I’ll be queuing up to order one for sure… this leads us to ordering of the Surface Book and my dilemma/frustration with MS.

Microsoft states HD sizes include:


Storage1

Solid state drive (SSD) options: 128GB, 256GB, 512GB, or 1TB.


But current preorders currently list following combination options:

1tboptionnotice 1 TB option is mysteriously omitted.This is not my real problem with MS though, but an interesting side note.

My real problem is how 128GB and 256GB are the ONLY options for lower priced editions!  MS promotes their new Surface Book as the ultimate laptop with a premium feel and quality, but if so, why such small hard drive options?

There are options to make up for the lack of storage including SD card slot, and cloud… wait, cloud? You don’t mean OneDrive which I get a full 1TB of storage with my Office 365 account right?  If so, forget it. Why? Sadly when Windows 10 was launched, the OneDrive team ditched Smart Files.  Smart Files were cool as they allowed you to access files from your desktop that could either be online only, or downloaded locally. This saved valuable space on the computer while still providing the convenience of accessing the files anytime from your applications. In Windows 10, you now have to have entire folder set downloaded to your machine, killing your storage, sooo sad. 😦

So here is my plea to MS… please bring back Smart Files to OneDrive!

In the end, this whole rant might be mute anyway when the additional options (if any) is revealed later this month when 1TB is introduced to the line up.

Facebook… you battery hogging, social addicting app! How iOS 9 uncovered a dark truth

Like as many of you, I am a facebook “junkie”. More so, probably, because I am living halfway around the word and it is my key lifeline back to my friends and family back in the US. I am also a geek that likes technology (though I am usually a little behind the curve or I’d have to file bankruptcy for how quick technology evolves). Anyway, if I can’t afford new hardware, I try to keep up with latest software (usually free to be hip, or at least relatively cheap) and that is how we came to be in this article. I am a proud owner of an iPhone 5 (yes, 5, not 5s 😛 though I do have my eyes set on the new Windows “Premium” Phone, but I digress). Being a fan of “new” stuff, I installed iOS 9 Public Beta 2. Of its MANY tweaks and improved stability (some I will touch on in later articles), I’d like to talk about the highly improved battery management page, more specifically, the battery usage.

Apple has now made battery a priority by giving it a dedicated slot on the Settings Home Page

20150726_135908000_iOS

After opening the Batter management page, you will see a variety of options. For this article, I am going to skip over the Low Power Mode (awesome as it is and deserves its own post) and go directly to the Battery Usage portion of the screen. This lists all the apps usage of the battery in X time frame. This listing is not new though, we had it with iOS 8, but there is a new twist… you can now get HOW the app is using it. Is it because of actual activity, background services, audio, etc. These tell tale signs are first spelled out when you open the screen:

20150726_141102000_iOS

You can even go further by taping the clock icon next to the Time Periods, this will give you the real juicy details and where the title of this article comes into view. You see, Facebook is a killer on my iPhone’s battery for me. When I looked at iOS 9 Battery Usage, I noticed Facebook used 32% of my battery life and an extra note was listed “Background Activity”… hmm. So I tapped on the clock icon and what do I see…

20150723_234417000_iOS

FACEBOOK! you Battery Hogging App!!!! I lost 32% of my battery and most of it was for BACKGROUND SERVICES!!! What the heck Facebook! Since Messenger is the only component of Facebook I need persistent data from and now that is a separate app which is no where in my top app usages, I jumped over to Facebook settings screen and turned off that service in a hurry!

In Facebook’s defense though, I think I know what is happening. When I am scrolling through the newsfeed, Facebook is going several entries ahead so the experience is as seamless as possible. My guess is most of that is because I jump out of facebook to look at email, Feedly or simply turn off my phone. This causes the app to run in the background (even for a short bit) to build new entries in my feed.

Even if this is true, why every time I open the app in “warm start” it actually resets completely!!!

How to quiet pesky notifications in Windows 10?

I am one of those Microsoft fans, but not a full-fledged member… yet…. still waiting for the pesky Surface Pro 4 announcement, hihi. Anyway, as a show of my dedication to the Microsoft ecosystem, I am a proud Office 365 subscriber, and active user on Windows OS (ok ok, I am sorta cheating running it on bootcamp in Macbook Air, but again, waiting of that Surface Pro 4, so give me a break 🙂 ). I am also a proud Windows Insider, running Windows 10 + Office 2016 preview and I gotta say.. I LOVE IT!!! I’m so in love with it, that I took the leap and use it on my work laptop.

Problem though is I just could not find the silence mode for notifications 😦  In windows 8 and 8.1 it was very easy to find in the charms screen, but in the new Notification center, it was no where to be found. Alas I found it! and here are the steps:

NOTE: these steps assume you are running build 10074

  1. In your System Bar (notification bar), locate the Notification Center icon
    NotificationArea
  2. Right click and locate “hide notifiactions for” in the menu. Here you can select 1 hour, 3 hours, or 8 hours.
    HideNotifiaction
  3. When it is successfully silenced, you will see the icon switch to display
    Notifiaction Silenced
  4. To display notifications again, right click on the same icon and select Show Notifications
    reenabled notifiactions

One problem I am still trying to troubleshoot still is how to silence the sound 😦 That is still being activated. I should note I had same experience in Windows 8.1 as well and will make sure I add it to the feedback in the Insider Hub.

Have you found a solution to the sound issue? Let me know in the comments and I’ll update the blog 🙂

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 

Microsoft’s Vision of the Future… one word… AMAZING!

I have always been a fan of vision of the future. it does not matter if it is just a dream, or seem completely unreal, but the ability to view possibilities without limits and think outside the box… that is what results in actual possibilities. Microsoft is one of those companies that envisions great things!

Continue reading