Tag Archives: UI

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).

Web Fonts, a blurry line between UI and UX

I’m a technology hobbyist; love to follow everything related to technology, especially in relation to mobility. That is probably what attracts me to Apple so much. Anyway, I was on a search for latest news about Apple Watch as rumors are now swirling of an event in March. Anyway, long story short, I came across an article from a blog I don’t commonly follow, Macworld.co.uk. But as I was reading an article about latest rumors, I immediately noticed I was having a terrible time reading it. Here is a snapshot of what I am talking about –

Poorreadability

This brings us to the topic of today, selecting a web font, but what is more important UI (user interface) vs UX (user experience)? In my example above Macwrold chose to use a lightweight font called Aktiv Grotesk, a very pretty font, I must say BUT only if used correctly. Like any font, there are many ways to manipulate it, including Font Weight and Font Height.  Macworld is using it not only for first heading but subsequent headings. In the example above, h2, has the settings of:

Font Weight: 200
Font Size: 1.5em

Font Weight 200 turns the font into lightweight giving it the modern clean simple look. If we increase font weight to 300, we lose the goal of the font.

fontweidht300

That leaves us with Font Size. If you play with the Adobe Typekit or even better, codepen.io, you can fine-tune the CSS settings. After a few trial and error, I discovered that Font Size is best read at 3.1em or 50px as shown below while maintaining the preferred Font Weight:

ImprovedPixelWeight

So what is your thoughts? When should UI be sacrificed for UI in regards to font? Any other tricky fonts out there?