ZebKit First Impressions and Suggestions

[DavidPesta]

I love what you have developed here and I am very tempted to use it to build my products. There is some feedback I would like to give you about my experience as I review and think about this framework. I know other people are going to have the same issues and concerns. You are close to making this perfect!

Website issues:

1. Your website loads kind of slow in the United States. (It was really slow for me yesterday. It is a little bit faster today.) This gives the impression that ZebKit is slow. This will scare some people away.
2. Your ability to explain things and articulate concepts is very good, even excellent. However, while your proper use of english is not bad, it's not very good either. This scares people away. (I know it shouldn't, but it does.) There's a certain flow with language that some native english speakers could assist you with that would captivate your audience better.

A single solution to 1 and 2 may be to host your website directly from GitHub. This would improve the speed of the website. It would also allow people like me to proofread the wording of all your website's content and create pull requests so that better english is used on your website. GitHub encourages people to host their pages on their platform and has set up a special method for it: http://pages.github.com/

I tried out your demo using the following mobile devices: iPad2, Amazon Kindle Fire HDX, and an Android phone. I found the following issues on all of these mobile devices. What is interesting is that almost the exact same issues were present on all of the devices, which testifies well to the consistency of the framework across all touch devices.

1. The virtual keyboard does not appear when trying to type into the text boxes. This is the biggest killer for adoption on mobile devices. We all know that mobile devices are the future. If there is absolutely no way to get the native virtual keyboard to show up on mobile devices, then you may need to do something drastic, like create your own virtual keyboard control popup. That may sound extreme, but then again, what you are doing to emulate all UI controls is already extreme. This would be more of the same--think of the ZebKit virtual keyboard as just another UI control that ZebKit emulates. As far as designers are concerned, there is a big bonus to this and a great potential selling point for ZebKit: UI consistency. The native virtual keyboards give users a different design experience (depending on what device they use), which drives designers nuts. By adopting ZebKit with its virtual keyboard, designers can ensure a consistent look and feel for the virtual keyboard that appears on their web application. I cannot emphasize enough how important it is for a virtual keyboard to work on mobile devices.
2. When I want to scroll the entire page up and down, swiping up and down across the application is not responsive. I am forced to swipe up and down to the left of the application on the DOM in order for it to respond and scroll the whole page up and down. This problem will block the functionality of a large full screen application that extends its canvas beyond the borders of the page.
3. On the Basic UI tab, the slider is giving me problems. I want to press and swipe back and forth for the needle to move along with the swiping action of my finger, but it only works sometimes. The problem I am experiencing is that the hit target of the needle is too small. When I press on the needle, if I don't hit the needle exactly, it will not follow my finger as I swipe. This is really hard to do with touch screens and nearly impossible with small mobile devices. So, I think it needs to work like this for both the PC and the mobile context: Instead of making the small needle the hit target for swiping action, make the whole entire slider bar the hit target for swiping action. When I lay my finger anywhere on the slider bar, the needle should immediately jump underneath my finger and then track with my finger as I slide it back and forth. The same thing can be true for clicking with the mouse. When the mouse press is down anywhere on the slider bar, the needle should jump underneath the mouse cursor and then track with the mouse cursor as I slide it back and forth. There can be different options available for how the slider could work, but this is the most user friendly one under all the different contexts of usage that applications will face in my opinion. So I would recommend that this be the default behavior.
4. After I tap on buttons, the graphic for the buttons always remains in the down state. At the bottom of the Basic UI tab, when I tap on any of the buttons, they remain dark and do not become light again. This happens on all mobile devices that I've tried and does not happen from a PC with the mouse.
5. On the Panels tab inside of the Scroll Panel sub-tab, in the textarea at the bottom right with the vertical and horizontal scroll with the HTML source code in it, I encountered the following problem. When scrolling the horizontal content to the right, when I get near the end, it jumps back to the left. If I scroll fast, it jumps back to the left very prematurely while it is still in the middle. It should be able to scroll all the way to the right and then stop, even if I continue to scroll in that direction. It shouldn't suddenly jump back to the left.
6. On the Tree tab, the icons that collapse and expand the tree nodes are extremely hard to touch. The hit area on the icons to collapse and expand the tree nodes needs to be increased a lot. (I do like how double-tapping on the items themselves collapses and expands the nodes. This works great except on the iPad2 where double-tapping the items does not work to collapse or expand the nodes. Double-tapping also does not work to start edit mode for the editable tree on the iPad2. This is the only difference between my touch devices that I found.)
7. On Tooltip & Win, when the demo window is open and activated, the X at the top right is extremely hard to tap. The hit area needs to be greatly increased for that to be usable on mobile devices.
8. On Tooltip & Win, I would love it if the tooltips popped up when you touch-and-hold the hit area. That would make tooltips useful on touch platforms instead of not having any way of showing up. And also, the delay on tooltips should be adjustable so that they can show up instantly without delay.
9. On the Designer tab, the blue handles to stretch the different UI components could barely be adjusted at all. The hit target needs to be much larger for these handles.

There's one more thing that might be outside of your control, and that is trying to develop a team of core developers for this framework. You might be the most dedicated and reliable person in the world, but there is no way for us to know that. When there's just one person, it makes us nervous. When we commit to using your framework, the success of our projects depend on updates and maintenance of your framework over the long term. When there's a team of people behind it, we feel more secure about committing to it. Again, this is just something to keep in mind and is not entirely under your control. But by fixing the 11 issues above, you are sure to attract a lot more people, including core developers.

If you can get all of these issues fixed, it will go a LONG way toward the a wider adoption of your framework. I may go ahead and develop something small for my personal use just to see how it feels to develop with it. You have a great thing going on here and I want to see you become very successful with it.

Again, I'm really excited about the future of this framework.

[barmalei]

Thanks, glad to know you are interested in the library.

1. Have upgraded zebkit hosting to archive better performance recently
2. Yes I am not a native speaker and often don't have enough time to proofread the written documentation. I will think about possible migration to github pages, but at this moment I prefer to keep everything on zebkit web site. Potential migration can take my time away. The highest priority for me is developing stable Zebra code + adapting Zebra for mobile world. I have to select only few targets and have to "cut tails".

Other points:

1. It is impossible to handle key events on mobile (at least on Android) since key events code is practically all the time set to zero, nevertheless what you have pressed. Zebra provides an HTML element wrapper component that represents an HTML element as a standard zebra UI component. In other words you can place theoretically any HTML element into zebra layout as if it was a zebra UI component. So use "zebra.ui.HtmlTextField" component on mobile touchscreen devices instead of "zebra.ui.TextField" component.
2. (2-9) UI components have to be adjusted to fit mobile platforms. Some of them are already adapted another one is in the list. Thank for your report, it is helpful. Pay attention the basic demo application is not very good use-cases to be tested of mobile devices. Normally you have slightly prepare your app for mobile world. Number of things that are recommended is pointed on WEB site: http://www.zebkit.com/documentation/writing-ui/ui-basic-ideas/mobile-devices/

Also few "dirty" test mobile applications are available by the links listed below:

• http://repo.zebkit.org/latest/mobile/list.html
• http://repo.zebkit.org/latest/mobile/designer.html (you can size component with two fingers gesture)
• http://repo.zebkit.org/latest/mobile/grid.html

Also agree with your point about necessity to have team/company to make the project more reliable. But what we want and we have often differs :) Anyway I do my best to move the project forward.

[DavidPesta]

Very good, yes. Thank you for your great response. I am definitely going to keep my eye on this fantastic library!