Tag Archives: iOS

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

Around the Blogsphere: Flash, Firefox, Chrome, UWP oh my!

Final Bow for Flash estimated in 2 years

With recent acceptance from Adobe with Creative Suite 2016 parting ways with Adobe Flash, more and more signs point to the final bow (goodbye) to flash in next 2 years. Per a report from Encoding.com, as referenced in The Verge article (http://www.theverge.com/2016/1/27/10840480/flash-dead-in-two-years-webm), Flash makes up only 6% of multimedia for mobile and Web today, down from 14% in 2014. The article points out some interesting observations of what is actually replacing Flash today, with what appears to be a final battle between the royalty-free codec WebM (http://www.webmproject.org/) commonly found in HTML5 and H.264 with its eventual successor H.265 to support 4K video.

Firefox Introduces Push Notifications for Desktop

A feature that has been around for a while now in Chrome and Safari, Firefox now has jumped on the Push Notification bandwagon.  Push notifications with desktop browsers brings the benefit of content providers push information to the user without requiring them to have their site open in the tabs. If you are an active user of Chrome for instance and use Gmail/Facebook, you might have noticed popup notices in the bottom of your screen, these are push notifications (of course, if you allowed such services).  Why is this important? This opens new possibilities in ecommerce for example. Cart Abandonment results in large potential revenue losses. Instead of sending a traditional email which results in loss of valuable time, we can now push a notice to a customer to complete their order in a timely fashion.

Read More here:

Support in Microsoft Edge browser is still classified as “under consideration”

Chrome for iOS Supercharged

Chrome on iOS has just released a new update (v48). The biggest change is that they trashed their own rendering engine in favor of iOS 9’s extendable engine WKWebView, resulting in significant drop in crash rate and faster JavaScript execution (i.e. it is super fast, putting it on par with Safari).

http://9to5mac.com/2016/01/27/chrome-ios-stability-speed-wkwebview/

Chrome Desktop Enhanced Security

Chrome v48 (for Desktop), released yesterday, has a new security panel in the browser’s DevTools (F12). This will help clarify content origin, certificate validity and other items related to your browsing safety.  Read more here – http://blog.chromium.org/2016/01/introducing-security-panel-in-devtools.html

Visual Studio helps port iOS apps to UWP (Universal Windows Platform, aka Windows 10 App)

Microsoft has a feature in Visual Studio that helps developers port existing iOS app code to the UWP to help close the app gap between Windows 10 mobile platform and well-established iOS. To support this effort, Microsoft has been releasing a series of articles, all of which is introduced here – http://www.winbeta.org/news/ios-developers-get-introduced-to-visual-studios-for-developing-universal-windows-10-apps.

Recap of Week of November 30 (Sorry forgot to post this!)

Around the Blogosphere

Another nail in the coffin for Internet Explorer.

Late last week, Microsoft has announced the ending of support for all versions of Internet Explorer (IE) with the exception of IE 11 (announcement here, https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support). This decision ends years of heartache and suffering of our talented Front End Development team as earlier versions used unique rendering engines, causing excess hours, tears and sweat. But this move is not to push IE 11, but it’s more powerful and well-planned heir, Microsoft Edge.  If you are not aware, Microsoft Edge is the new browser that was released with Windows 10 earlier this year. Unlike Internet Explorer’s rocky history with excess bloat, Edge is very light, and extremely fast (beating out the likes of Firefox and Chrome!). As mentioned, this is a well-planned browser by Microsoft, with that said, Edge currently does not provide all the same features and capabilities that you would find in Chrome and Firefox, one of the biggest missing features is Extensions, but just like Windows 10 OS, Microsoft is continually enhancing it, and we should see Extensions introduced by mid next year with Windows 10 “Redstone” release. To learn more about MS Edge, check out this video – http://www.winbeta.org/news/windows-10-depth-microsoft-edge-video

Adobe admits death of flash by reinventing Adobe Flash Professional

We are a step closer to complete and utter destruction of Adobe Flash with the announcement that Adobe will be launching a rebuild Adobe Flash Professional to become Adobe Animate CC. http://techcrunch.com/2015/12/01/adobe-puts-another-nail-in-flashs-coffin/

Rumor: iPhone 7 ditches headphone jack… Really?

Although I agree the headphone jack is one of the largest ports left on the iPhone, but do we really need a thinner iPhone? Doesn’t that just mean the camera sticks out even more? Chinese paper thinks Apple’s next goal is to kill off the headphone jack like they successfully did with the CD-ROM (yes, I really did write that!)

Source: http://www.theverge.com/2015/11/30/9820416/apple-rumors-headphone-jack-lightning-port-iphone

Great Site for Deal Tracking

Lifehacker has an awesome deal tracking site called Kinja Deals, highly recommend following them.

http://deals.kinja.com/

Best Interview Questions, Provided by the CEO’s of the world

I have to say, my most favorite one is Jeff Zwelling:

“A hammer and a nail cost $1.10, and the hammer costs one dollar more than the nail. How much does the nail cost?”

http://www.businessinsider.com/famous-execs-share-favorite-interview-questions-2015-11

UX Development Tool for iOS and Android

Interesting new platform called Fuse that helps with UX development by providing real-time streaming to your devices.

https://www.fusetools.com/

Apple has Swiftly moved their Swift Programming Language to Open Source

Like how I played on words there 😉 Read more here – https://swift.org/

Everything about Nothing Recap

How to Kill (Hide) Status Bar in Firefox (without Add-Ons)

See past articles here.

Hybris Blank

No new articles published this week, but see past articles here.

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!!!

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

Sharing the sweet secrets of Google Chrome for iOS

Oh Google Chrome on iOS, how I love thee, let me count the ways… in a latest release from Google, Chrome now includes some pretty quaint but also features, I’d like to share…

Pull to Refresh/Create/Close

Arguably one of the coolest new feature (on iPhone, iPad appears to not have) is ability to pull to display a new series of options at top of window… Give it a try! (just do not slide right please :-)).

When you are at the top of the screen then proceed to pull down (using touch gesture of course ;-)) you will notice 3 icons appear, with the middle icon have a blue bubble around it:

Pullto refresh

If you let go at this state, it will refresh the current tab. If you were to instead drag your finger to the left (after dragging down of course) a new tab will be created and displayed. Likewise, if you drag your finger to the right, it will immediately close the tab. Awesome right!

BONUS NOTE:

Continuing on the topic of single handed features in Google Chrome, if you swipe your finger from left to right on the left side of the screen or right to left from the right side of the screen, you can quickly jump from tab to tab.

Search and activate copied links from Notification Center

Not to the level of coolness as the pull to close feature (I prefer the more simpler things to get me really excited), Google Chrome now has a feature in Notification Center. You can now:

  • Create new Tabs
  • Perform searches with voice dictation
  • and even activate links that are currently in your clipboard!

GoogleChromeNotificationcenter

NOTE: if you are not familiar with Notification Center, to see this feature, you need to tap Edit in the same window and then tap the green add icon next to “Chrome” to activate the feature.

Integration with 1Password

Not as obvious but still very useful is ability to access 1Password password locker to retrieve passwords directly from Chrome. This though is not straightforward at all. Here is the visual to access 1Password:

1passwordActivate

  1. Open the web site in Google Chrome
  2. Tap the action menu icon in top right
  3. Tap the icon in top left of the action menu that looks like “export”
  4. Tap 1Password in the new dialog box
  5. Login to 1Password and it should automatically display the password for the site you are on (if the web site is properly listed in your 1Password locker).

There are other cool features recently released like weather in Suggested Search Results menu, but not as cool as features I mentioned above 🙂

Enjoy!

Uber is Uber-tastic… but… Experience of a first time user and some suggestions for Uber

This past weekend I had the opportunity to join a great event that announced the launch of JIRA development team in Vietnam, hosted by Atlassian themselves. Think of it like a glorified recruiting event, because guess what? The #1 place to work in Australia and #7 in USA is hiring! Learn more here.

So I sorta went off topic above but yet not entirely as my story about the JIRA Landing In Vietnam event above is the reason I got introduced to Uber. Atlassian worked with Uber to receive a special promotion offer to new customers of Uber to receive 100,000 VND for their first trip (note: 100,000 VND is just under $5 USD in case you were wondering). Free taxi, heck, why not! But I never seen anyone use it before so I was a little hesitant to use the program. I sent out a mayday to my friends on Facebook for past experience using it in Ho Chi Minh. One of my friends is awesome! She sent me a promotion code with a free 100,000 VND on my first ride (and you can too, I’ll explain later how to send your own code to friends).

Anyway, I took off to the App Store (I am using an Apple iPhone 5, latest iOS version) and downloaded the app. Upon launching the app, it asks if it can use your location services. Since this app brings taxi to your doorstep, of course you need to click Allow 🙂

Access LoatoinNext step is to setup your account, click on Register to begin the process:

StartScreen

Sadly I do not have screenshots of the registration process but I will give you some tips:

  1. It will provide you steps to setup Name, Phone Number and profile photo, I suggest you do this, easier for driver to find you 🙂
  2. You can enter the Promotion Code after you setup your account if you do not have one on hand, I’ll explain how later.
  3. You must enter a credit card to finish the registration process, you cannot register without it. Even if you know the promotion credit you get from a friend will cover your first ride, you still need one.

After successful creation of the account, you should see one of the following 2 screens:

A. There is a car close enough to you that is available, this is shown by the black button in the middle of the screen that says “Set Pickup Location”

Car

B. There is no cars close to you resulting in No Car Available Button

No Car

Going back to the case where there is a car available, notice the button has a number on far left. This is the estimated time it takes the Uber Taxi to reach you and in the example above, it is saying 10 minutes. Now this is where I had my first problem with Uber 😦

When I first opened and registered the app, I did not have a button. All I saw was the example seen below:

MissingBlackButton

As you can see, I was missing a black button, and the bar below to select the type of Taxi I wanted (UberBlack, versus UberExec). I tried click on the menu (top left icon) and selecting “Get an Uber”, tried taping the screen, tried signing out (see later where sign out option is hiding), all to no avail. I also reviewed Uber web site for instructions, but they provide no visual aids in the documentation, but that sorta makes sense as lets face it, the app is really straightforward, when it works.

So off to Uber Support I go. I gave them all the details about my experience, and in all 3 times I tried working with them (by email) all they recommended (spoke with 2 different support members) was to remove the app and reinstall it :-(. Now I will admit, I can be stubborn sometimes and think i know better than tech support and not do what they ask but this time I did follow their instructions but to no luck, same issue. So I decided to try things on my own. This included trying particular order of steps in attempt to reset the account, move the map around, zoom in and tap the green pin, still no luck. Then finally I decided to check the payment details.

In the menu I mentioned earlier (accessed by clicking the profile icon in top left) I then selected Payments –

Menu

In the payment screen you will see a list of credit cards you configured in your account, in my case, I just had one (AMEX card)

SelectPayment

Press the payment and you will see a visible of a card (with most numbers blocked of course) –

CreditcardDisplay

Click Edit (in very small text in top right) to see an edit view –

Modify Creditcard

This brings us to the second mystery.. what the heck does that flag mean beside the expiration date field?

WeirdFlagOption

When you click on the flag, it opens a country selection window. Now in my case I am using a US credit card, in Vietnam and the Vietnam flag is displayed, so my guess is (this is wild and not confirmed guess) to identify the type of currency to be charged. The odd thing however is the fee charged to my account was in American USD and not VND, so the flag is still a mystery. Anyway, the process I did was from this screen I reentered the CCV code (it was blank on open, and then click on flag, set it to United States and click Done. the credit card view returned to the Display card view (3 images up). I then clicked Back located in small text in top left. Now here is the tricky part (mainly cause it is hidden) click on your picture to open your profile, then scroll to the bottom to find Sign Out:

Signout

Now Log back in and wahla, we have our black button! Whew!

Some other things I learned:

  • UberBlack cars are NOT actually black hahaha. When I got successful request through, my driver drove a white Kia.
  • Not all drivers enter their license plate details (I guess not a requirement?)
  • Not sure the maximum distance an Uber driver can be to be requested, but appears between 22 and 25 minutes is the magic number for maximum distance for pickup.
  • Uber Drivers could also chose not to accept a pickup by simply driving away after being requested and chose to cancel the request.
  • If you have a friend thinking of trying Uber, send them a free promotion code to help them get started (and receive credit yourself if they use it). To do so, go to the menu and click Promotions. You will see a screen as shown below with your unique coupon which you can send to as many people as you like. Again, this coupon is only good for first time users only –
    ShareCode

So here are my recommendations for Uber to help make it a top notch app:

  1. Provide a “demonstration mode” to the app that provides customers a complete walk through of what they should expect. Those who are not savvy or used to features like Uber, will be weary on their first timeout and may not know all the cool features and ins-outs of the app. Yes, the app is built very simple, but if something is not working right (like my case) we are lost and not sure if something is correct or not, and since your documentation provides no visuals, it is a real handicap.
  2. Improve information in the Payment Modify step. For example, what is that flag for? Also help clarify in the app in cases where someone is traveling in a different country that supports Uber, how payments are processes would be helpful.
  3. When entering promotion code and an error occurred, the screen displays 2 errors as shown below. First error is chopped off
    Error while the second error is displayed completely in the actual screen below the field. This is confusing as the error in the actual screen is very small and easy to miss.EnterCode
    I suggest making the first error more general like “Sorry, Failed to Apply Promotion” then in the actual promotion screen make the error text larger and in Red to help standout.
  4. Not sure if this is a bug or what, but when in actual Trip mode (meaning I was picked up and traveling) my destination shows a black marker that says — min and never changes, I assume this means amount of time traveled so far, but as I mentioned, the value never changed, bug maybe?
    MinNeverdisplay

I hope these tips help others with their Uber experience, and hope Uber takes my recommendations and experiences to make that perfect taxi app! 🙂