Maemo UI improvements blog.

September 6, 2011

Web Browser of Today

Filed under: Medium UI improvements — Tags: , , , — Andrew Zhilin @ 00:05

Hello everybody.

Today I’d like to discuss an app that we’re using probably every day on our smartphones but each time it feels underrated — the built-in web browser.
The problem is that the Maemo browser has been facing functional devolution year after year. But the web has been changing constantly as well as our lifestyle so now we need a proper tool to view the Internet in the right way more than ever.

So here are my thoughts on what should be changed in the default web browser in Harmattan. Many of those features you maybe have already seen in different apps so basically I’m just making up the concept out of existing pieces.
(more…)

September 4, 2009

Fremantle: Browser zoom.

Filed under: Heavy UI improvements, Medium UI improvements — Andrew Zhilin @ 02:29

Hello everybody.

Today I’d like to share my thoughts about upcomming Maemo 5 release (along with new highly anticipated hardware) and it’s window to the internet, in other words – browser.

First of all it’s cool to see “mouse over” mode (as I was calling it long ago, but haven’t got time to describe it in pictures though) in MicroB (Timeless said that it’s Maemo brower now :D) that allow you to hover above drop down menus without clicking unnecesarry links , that’s cool :)

But now I’d like to mention circular zoom feature. Well, maybe it sounded as a great idea for non-multitouch zoom and pretty unique too. But as you can see in various video demonstrations (or for yourself, lucky owners) it doesn’t work quite as it was expected to. It starts with some really bad looking page fluctuation and then starts to zoom in/out at some unpredictable speed. I’d like to show you how my vision on “fine zooming” in browser.

1

(more…)

June 10, 2009

Fremantle UI: File Chooser

Filed under: Medium UI improvements — Tags: , , , — Andrew Zhilin @ 23:06

Hello everybody.

Today I’ve read an interesting discussion at http://talk.maemo.org about File Manager and kinetic finger scrolling. Quim mentioned that user won’t need to have a fast way to navigate thru loads of items in the File Manager cause all possible media will be arranged in specific applications like media player for music, image viewer for images and so on. Well, I think he’s right in some points but a handy way to navigate thru large ammounts of files without breaking your finger is always good. So I have an idea how to make everybody happy. And to concentrate on scrolling itself, I’ll show you my vision of built-in file chooser.

Let’s imagine you want to add an image to your mail.

1 (more…)

July 19, 2008

OMWeather 0.21 preview

Filed under: Medium UI improvements, Released software — Tags: , , , , — Andrew Zhilin @ 22:07

Hello there.

Today I will show you some results of real Community Collaboration. Real transcontinental developing experience. Just a few months ago I had no idea how Community works, what shall I do to participate in it’s life. Few months ago I had an honor to meet such great developers as Vlad Vasiliev, Oleg Fialko and Andrew “Personal” Olmsted. I was extremely pleased to work with them on some awesome software. I’m not a programmer at all, but they allowed me to participate in their developing process and I’m very grateful for them for doing this. I can’t describe how awesome is to watch your ideas becoming alive. Thank you all, guys!

Well, lets move on to our topic. While another great “Personal” project is in development, OMWeather 0.21 is nearcoming and I want you to have a breif look what we’ve done during this time.

(more…)

July 18, 2008

WordPy and the Linear User Interface

One of the reasons for the complaints about the user interface for the Internet Tablet is that it is not linear enough. If you will, programs are designed to solve a problem, but have many side roads exposed to the user when they are on the way to solving the problem. And in some cases, the program is designed to solve a problem, however the application was designed so simply that the only indication that the program solves a problem for the user is in contained in the name of the program.

There is not one solution for this kind of user interface convention, but I do want to highlight a development effort underway with the WordPy blogging application where in its move to increase functionality that a different user interface paradigm was employed. In a draft version of the next iteration of WordPy, this concept of progressive, linear exposure of features demonstrates how Internet Tablet applications can contain the power of a full-sized PC application, but be maximized for the smaller screen and different interface.

The Current Version of WordPy

WordPy is a blogging application for the Internet Tablet. Its designed for use with Blogger and WordPress blogs and after a recent refresh, has been made compatable with the IT2007 operating system, and both Chinook and Diablo editions of IT2008 operating system.

Its main aspect of interaction happens through tabs. These tabs contain the instructions for main editing text, advanced options such as extended entries and tags, and a preview post component that allows one to see the post before hitting publish from the IT.

Settings are managed via a modified (from the default Maemo style) system menu. One can link to Flickr and Pisca web albums and then add pictures from those albums to a post. There’s also a post delete function that enables on to delete any previously published post.

Seemingly simple and to the point. But there are some interface problems with that version of WordPy that at first glance don’t seem like a major issue, but in the context of the IT and its usage paradigm, are pretty major issues.

Some of the Issues with WordPy

  • The title field sits on a second tab, meaning that one has to navigate to another screen before publishing even the simplest of posts.
  • Advanced features while present clog up the third tab, leaving little room for anything more unless a new tab is added
  • The preview tab shows the post, but not using the style sheet of the blog, nor does that preview screen allow the user to post from that preview screen
  • Additional settings sit a few levels deep in the Publishing menu

There are other issues that can be detailed and we will not go through them all here as its beyond the scope of the view. I believe that there is another way to interact with applications on the IT that are more conductive to simply getting things done. And to do this, by progressivly opening functionality as the user goes through the application, makes for a more pleasing experience, and overall a shorter time from idea in head to post on the page.

An Initial Proposal

Initial WordPy UX/UI Proposal
Initial WordPy UX/UI Proposal

As you can see with the screenshot (larger view is linked to my Flickr), compared to the latest release of WordPy, this proposal seeks to minimize the amount of dialogue boxes so that on a 4in screen, the user can be more concerned with the content and less about the other things that they cannot do.

If you are one who is into methodology, the idea behind this proposal was to unfold features as the user dug more into the program. To allow for exploration to open more features without exposing all of those features all at once, creating a powerful yet intimidating interface.

With tabbed interfaces, you can assume that just because the user doesn’t see it that they aren’t wary of more features. But tabs invite touching, and as Amazon learned when their site got too large for the 40+ sections of their website, there can be too much to touch when too many functions are added. By using a methodlogy of progressive, linear screens, an application like WordPy would be able to take advantage of the current feature set, and then also have additional functionality grafted on without changing the core user experience.

A View of the New WordPy

WordPy Future (link points to .deb file) is the current UI/UX preview for the new WordPy interface.

As one can see (screenshots coming soon, hopefully), the interface relies not on dialogue boxes, but screens. From simple information screens such as the post, add image, tags, and preferences screens, to simpler effects such as making it easier to edit or delete a post by just clicking a button from the application home screen; WordPy is designed for a device that has a smaller viewport than a PC, and accepts different interface options than a keyboard and mouse.

Following along the UI/UX screenshot posted above, the point of the interaction is not on the features, which are clearly here and in more abundance (viewable) than the current version, but on posting. With any program, the goal isn’t just to have features, but to solve an issue first, and let the features be revealed to the user as they are needed.

This is a linear user interface. Meaning that you start at one point and then move to another with end-points to a final product, but very few side-streets from the main task. If a person opens WordPy and just wants to post and go, they open the application, hit Create Post and then just write and hit publish. Those that want more functionality can expose it by clicking on successive buttons which expose more functionality. When the application’s feature set has been maximized, the application ends at the same point – Post.

Disclosure

So that you (the reader) do not think that I am coming against the developer of WordPy in a very public arena, this is something that I presented to him many months ago and has now made it to a UI preview stage. At this stage, I felt it appropriate to call to the table the different UI/UX conventions being employed here. But opening the dicussion of this method, it is my hope that developers reading this blog will start to think through how they design applicaitons beyond just the solving of a problem but also taking into account the fact that solving a problem on a PC is not solving a problem on an Internet Tablet.

More Information About WordPy

WordPy has been developed by Daniel Martin Yerga. The current version is compatable with the 2007 version and all versions of the 2008 Maemo Internet Tablet operating system. The version spoken of in this article (WordPy Future) is a future version that is currently under development.

For more information about the current version of WordPy, to contribute feedback or programming assistance, and to download for Nokia Internet Tablet devices, visit the WordPy homepage at Maemo.org.

May 16, 2008

Addressing the Stylus-Driven UI

Given the fact that touchscreens have become nothing but the “in” thing to do, it seems like most every innovation with the Internet Tablet focuses on making it finger-friendly. Now, there’s nothing wrong with it, and personally I prefer it. But, what would happen if we addressed the UI from a perspective of being optimized for use with a stylus?

Navigation

As much as sometimes we don’t want to admit it, using the stylus is sometimes the most effective way to navigate around the tablet. Here are a few recommendations for making the stylus more effective:

  • Making actions such as tap and hold more evident on things like text, icons, and when items are highlighted by showing a star or some kind of indicator that there are some additional functions
  • When scrolling web pages and long documents (PDFs, etc.) with the stylus, show trails that accelerate or decelerate scrolling speed as well as FF/RW buttons to do a quick page up/down action on the page
  • In applications that feature forward and back, allow for gesture actions with the stylus to go forward and backward (essential in full-screen mode)

If you will, the point here is keeping the stylus in your hand, and a part of the interaction of the tablet that finger-friendly UIs expose.

Writing

I want to break this up into two subsections, handwriting and keyboard.

Handwriting

  • In terms of handwriting we can look at having a transparent writing pad appear over writable sections (when the focus cursor is activated for those items)
  • Improve the sensitivity of the handwriting engine so that letters that are written together can be easily trained and recognized (maybe some type of AI can be added here)

Virtual Keyboard

  • Allow for users to not have to lift the stylus, but at every “stop” and “direction change” the letter is recognized.
  • Change the location of the word compted words to the top of the virtual keyboard, keeping the space bar free from being possibly taken up by too long a list of words
  • Transparency could be nice here too

Thinking About Different Needs

I know that we normally want to think about things in a way that seems comfortable to us, but the truth of designing a user interface is that you are making something that is comfortable to be learned for someone else. Fingers are great, and painting with them can really amount to some neat artwork. But for those that like to use a brush, attention has to be paid to them too, because some really nice masterpieces can be made when we make sure that the canvas, paints, and brushes have been made with them in mind too.

May 6, 2008

Chapter IV: Ready to surf.

Filed under: Medium UI improvements — Tags: , , , , , , — Andrew Zhilin @ 22:42

Hello there.

Today we’ll talk again about main feature and main way of use of Internet Tablets — Internet surfing. But not about the window to the web, MicroB. We’ll talk about things, that are very common for every user and that we face many times every day. Actions, that comes before surfing itself. I have some ideas how to make them more handy and seamless. So, let’s begin.

As we begin in every article, lets see what we have now. A connection icon in the tray that opens drop-down menu, where you can select connection and go to the connectivity settings. All looks pretty handy, but in fact it’s not. Let’s count steps, that we take to connect to the internet in different situations.

Added Wi-Fi hot-spot.

  1. Click the icon.
  2. Click “Select connections”
  3. “Exit offline mode?” – yep.
  4. Window opens.
  5. Wait for Wi-Fi to search for all APs.
  6. Click AP that you need.

You’re online in 6 steps and near 15 seconds. Not so fast to my mind. It’s a bit faster with BT connection, cause you don’t need to wait for AP’s to be searched, but it’s totally ruined if you need to connect thru different phones. You need to digg deep into settings to switch the phone.

So, I’ve found easier way to handle all of this. Take a look.


(more…)

February 3, 2008

Tablet Heart (Web Browser): Part I

Filed under: Medium UI improvements — Tags: , , , , — Andrew Zhilin @ 05:10

Hello.

When you hear the word “Internet” or “Web” you don’t imagine instant messengers or some kind of administration tools or anything else. Your first thought are zillions of sites, that carries zetabytes of information, that is given to you in different ways like text, pictures, animation, flash, music, video and so on. So, if the device is called Internet Tablet — that means that it is profiled to give you easy and handy access to the maximum amount of internet resources. So the heart of that device should o be web browser. We gonna look at Internet Tablet browser and it’s UI closely in this article. Fire your engines!

To begin with I’d proudly like to say that OS2008 Internet Tablet’s web-browser called MicroB (also you can install it as additional engine in OS2007) is one of the best portable experiences of web browsing at all. It totally kicks Windows Mobile “Opera Mobile” and other competitors and easily competes with iPhone’s Safari that is “revolutionary extremely great new awesome and blah-blah” ;-) And it beats UMPC’s (to be fair, to that moment) because of battery life. It handles most of the sites without any render problems or crashes (actually, I haven’t seen such site :-). This is really really great and it approves the name of Internet tablet for 100%.

But nothing is ideal for 100% so after long time of everyday using MicroB I have come to some UI improvements that will help user to access most of the functions easy and quick.

First of all let’s see how it looks and behaves right now:

web_12.jpg

(more…)

January 31, 2008

OS2008 Browser Enhancements

Filed under: Medium UI improvements — Tags: , , — n800slip @ 08:52

While some users have complained about some of the technical aspects of the new browsers (e.g. latency, compatibility), I have found it to be quite good. Still, I can see some improvements that could be made to the UI to make it even better.

Scrollbar

Overall the browser makes a good attempt at being finger-friendly: the toolbar icons at the bottom, though small, are just large enough for finger presses. But while the scroll bar in other parts of OS2008 have become wider and more finger-friendly, the scroll bar in the new browser remains frustratingly stylus-focused. So the first change I would make to the browser would be either add the finger-based scrollbar outright or at least provide the option to use it. Another option would be to make it the default only in fullscreen mode, as I have depicted.

Browser Finger Scrollbar

(click for 800×480 version)

I have retained the stylus-sized horizontal scrollbar, since I believe it is less used. In full-screen mode, the page area is now ~735pixels wide, instead of 778px, but you gain a lot of usability for that minor loss of page real estate. (Now, some of you might retort that users can simply use the d-pad for scrolling. I’d agree, except that the d-pad scrolling in the browser is horrendous, since it is designed (foolishly, I think) to jump from link to link rather than scroll smoothly up/down. If that problem was resolved, the need for the finger scrollbar might be mitigated.)

Recent History (Back/Forward)

If you’ve ever gone down the rabbit-hole on a site like Wikipedia or Digg, you know that you can quickly end up on a wandering path of distraction. When you realize you’ve just wasted 15 minutes, you might want to go back to where you started to remember what it was you were seeking in the first place. As it is designed now, you would have to click the back button repeatedly until you reach your diving-off point. Since the browser will reload each of the pages along that trail, this can be intolerably slow, especially if you are on a slow connection. (more…)

Blog at WordPress.com.