User Interface

inovative concepts for Media in overal Haiku design

In reading some of the posts on R1 and R2 (especialy in regards to the quality of user experience) I realized that maybe more conceptual and inovative approach would to OS media design experience would also be attractive for first time users.

For example - just like using vector graphics (especialy in icons) that would make the interface scale and look better, it would be also interesting to use procedural/generative media...for example instead of delivering single quality fixed sound files it would be great to have them generated on the fly with SuperColider
(http://en.wikipedia.org/wiki/SuperCollider).
In this way one would be able to avoid hearing always the same sound when booting the system - but instead hear a tune that is not only variable, but also unique to his system (especialy if it uses system info to render specific sound)...that way it would be similar to the ida of older cars - when you could actually hear the engine (unique sound for each car) and by doing so becoming aware if all things are OK or there is something wrong.

Please take time to hear few examples of simple generative sound code from this webpage http://supercollider.sourceforge.net/audiocode-examples/

I am sure similar concepts could be developed for other parts of OS that would be inovative for system design, as well as make HAIKU stand out for it's quality/sophistication - rather then quantity of features.

Reimagining Deskbar

Following Deskbar redesign proposal is based on discussion in the 3D-Accelerated Haiku Desktop RFC comment thread. One problem that came up was that current menu designs do not support good organization.

Only ways to organize a cascading menu (or variant like Deskbar and Windows start menu) is to use subcategories and separator lines. One good thing about subcategories is that you have a short description (i.e., folder name) attached to the group of items in the category, but those items are hidden most of the time and inefficient to use. Using separator lines for grouping does not affect efficiency, but does very little to aid usability. They have no describing properties and they do not visually connect items between them.

My proposal for Deskbar design that attempts to support both good organization and efficient use, is essentially a new way to visualize subcategories.


The image is from an interactive prototype I made to test this idea. The prototype requires an SVG capable browser (up-to-date versions of Firefox, Safari and Opera work). Please note that the categories and applications shown are just for illustrating functionality and not a proposal for default Deskbar organization.

If your browser supports SVG, please explore the prototype a bit before reading further.

Explanation of the proposed menu visualization and behavior

  • Instead of having to click category name to show its content, we have the content listed below the category name. For example, “Browsers” catagory in the image above.
  • Often everything in a category is not equally important. To solve this, we add ability to limit which items of the category are shown below its name. A complete list of items can then be accessed by clicking the category name. For example, complete content of “Internet” category, show in the image above.
  • Finally, since categories can include subcategories, any item in a lower category can be shown below the name of the higher level. For example, “Firefox” and “BitTorrent” are shown below “Internet” category name in the image above.

To the best of my knowledge, exactly this type of menu has not been used anywhere. It is a combination of cascading menu and index menu that hopefully has the best qualities of both. Names and icons of items are equally well presented. Items are arranged to vertical list, which are easy to skim trough. Grouping of items should be visually obvious. Etc. There is some research results about efficiency and user preferences to vertically arranged cascading menus and index menus here

Visual appearance of this prototype is close to my idea of how this could be done, but contains some rough spots. E.g., how to visualize case where some applications do not belong to any subcategory (see “Productivity”category in the prototype).

Prior art of grouping, showing and hiding menu items

The idea of not always showing complete content of a menu has been used before by Microsoft, but their way was to “intelligently” hide items. There is also a feature in Windows XP start menu that tries to “intelligently” put often used applications to the beginning of the menu. Both of these “intelligent” features are essentially usability bloopers because they implicitly chance the interface. Although my proposal has some similarity to these, I believe it would work, because there would not be any “intelligence”. All decisions to show prominently or hide to sub level would be done explicitly by the user or have default setting that the user can chance.

OS X system preferences has some similarity to my proposal. There is grouping, but it is not visually clear in my opinion. Plus, horizontally arranged large icons with small text may look good but are not easy to skim trough, and place too much importance to the icon.

Blender's button groups interface is a clear source of visualization ideas in my proposal.

Comments?

All comments welcome. Is it appealing or an eyesore? Does it violate known usability principles? If you tried the prototype before reading the explanation, was it hard or easy to figure out how it works?

Many Ideas

First of all, apologize me for my English, I know it not quite good but Im improving. I have posted before but they have been deleted (I dont know why).

Quality / Stability, Kernel

I wish that Haiku before have been or sooner if possible BeOS clone. Have some security and quality features, i propose that this OS have a memory execution protection, just to make the life easier and secure, just to enforce to make best programming practices. The thing is like this:

*proteccion to dont allow execution of code if its in a "not code" memory section/page. So to prevent STACK and HEAP/DATA execution. So the application could fail, but OS remain stable.

*proteccion agaist stack underflow and data/buffer/heap overflow. So bad programmed applications could not damage the Operating system in that way and compromise it.

*independant memory position aplication execution.

with all this open techonlogies (even could be implemented by software) not only could make the user life easier but the developer life too, becouse it could be much more easier too detect some common bugs without crash our system. I guess some BeOS application are not too good programmed so they used that bad techniques, so at first place we could use a COMPATIBILITY user allowed method (or even a listed application allowment for compatibility mode with old and bad BeOS bad programmed apps).

at last
*portable devices compatibility and support, like those that could be plugued inot usb port, ex: Mp3 players, video players, memory cards/sticks, IRDa, WiFi, Routers/Hub/..., external storage.

Network Interface

I wish a well firewall, powerful but yet easy to configure, with an advanced mode for experimented users. Preconfigurated with the common and best settings to do every day work.

*Here we could add, a good network interoperability with all Unix open standards royalty free (SCO, BSD, Linux), to make a good neighborhood this OS in a network.

User Inteface, Game Kit

In this part I really wish a powerful GUI with a simple interface, capable to do good 2D/3D work. With advanced features to made easy programming great games using that GUI-API. I must be easy to extend, but the User Interface must keep standard, with the option if you wish to make it customizable with something like skins disigned by users, but with out let it modify the kernel/drivers of the OS. I made enphasis on standard because it hard work to bring support when the GUI its so different, and even the final user (common user) dont even know it at all its features and diferent options positions.

What its important too bring success to this OS its make powerful and yet simple, but with some easy advanced features for that know how to use it. To bring applications for: word proccesing, calc sheet, slide presentation, a good photo processing ex.linux:GIMP, a good vector drwaing ex.linux:InkScape, good Developing tools, like IDEs, .NET power and simplicity; and not less important a good 2D/3D engine (integrated API) so they (open and close developers) could bring great games. With all this we could attract much more users and industry.

-Morthozz

Rethinking scrolling

The way scrollbars work is pretty inefficient - especially for novice computer users. They offer three (!) methods for scrolling relative to the current position and none of them offers comfortable scrolling speed for all document sizes.

The arrows in the corners are very small compared to the scrollbar's overall size and they are too slow in most cases. Still, a lot of people use the arrows to scroll rather large distances in a document.

The scroll thumb (slider) is too small in big documents and requires too much aiming although it is the fastest and - for moderately-sized documents - a sufficiently accurate way to change your relative position. For very big documents this way of scrolling becomes nearly useless because it moves areas bigger than the visible region.

Scrollbar  basic lookScrollbar basic lookA third alternative is to scroll page-wise by clicking on the non-highlighted area. This is often too coarse-grained and sometimes collides with the thumb which may suddenly appear under the mouse cursor, so you have to adjust your mouse position to continue scrolling that way. Inexperienced users sometimes click on the non-highlighted area to quickly get to a specific location.

The following proposal should be more effective, but it requires an initial training phase because it's different from the current way of scrolling.

The arrows at the top and bottom are not buttons, anymore. Also, they are bigger to make it more obvious that they are part of the scrollbar background. The scroll thumb lights up when the mouse is moved anywhere on the scrollbar (not just the knob). The general appearance of the scrollbars is very similar to that of the current mainstream operating systems.

Left-click scrollingLeft-click scrollingPress and hold the left mouse button on any place on the scrollbar and you get into relative scroll mode. To clarify, you can click on the thumb, or on the arrows, or anywhere else on the scrollbar and it will have the same effect. By moving the mouse you can scroll a proportional amount of screen area in the same direction. The mouse movement causes the thumb to be moved at comfortable speed which is independent of the document size. Mouse movement has no effect on the cursor's position (i.e.: it works as if you could move beyond the screen borders).

Right-click scrollingRight-click scrollingRight-click (tablet users will prefer ALT+left-click) on any place on the scrollbar and you immediately jump to that location in the document. By keeping the mouse button pressed and moving the mouse the thumb will move directly with the mouse pointer as if you had right-clicked there.

When moving the mouse over a scrollbar the cursor becomes a double-arrow (up/down or left/right), so it becomes more obvious that by left-clicking you can move the scroll knob.

Pressing ESC with the mouse button held will bring you back to the last position before scrolling.

This proposal has the disadvantage that the right-click scrolling function is non-obvious and users would have to learn it, so it's not perfect and it could need more work.

Sorting Chute

The means of having the operating system automatically sort, file and perform actions on filesystem objects based on user-configurable criteria should be provided through the use of a "drop target" replicant known as the "Sorting Chute".

Details

The sorting chute would be comprised of three main components:

  • Replicant
  • Preference Applet
  • Drop Folder

Replicant

The replicant would act as a space on the desktop, designated by an appropriate visual representation, whereby filesystem objects can be dropped to have actions invoked upon them based on a set of user-defined rules.

Preference Applet

The preference applet would act as a means of configuring the rules against which the replicant would compare dropped objects. For each rule, the user should be able to specify the criteria matching objects must exhibit, and the actions to be carried out on those objects.

Drop Folder

The drop folder would simply be a folder monitored by the replicant for incoming files. This would enable direct saving or downloading of files to the "sorting chute" for immediate filing.

Rules

Rules should be constructible in much the same way as queries today. The main difference being the ability to set actions to be performed on matching files.

Actions

The available actions for a given rule should be comprised of standard filesystem actions (Copy, Move, Delete, Rename) as well as actions provided by Tracker Add-Ons able to operate on files matching the specified criteria.

Example

The following rules have been setup by the user:

  1. Name: Compressed Files
    Matches: [Type==application/x-compressed]
    Actions: Unzip to "/home/desktop", Move to Trash
     
  2. Name: Photos
    Matches: [Type==image/*] AND [EXIF::Manufacturer==Canon] AND [EXIF::Model==Ixus]
    Actions: Thumbnail, Move to Folder "/home/photos/%year/%month"
     
  3. Name: Install Applications
    Matches: [Type==application/x-bundle]
    Actions: Install for All Users

The user downloads a zipped file from the internet and chooses the Drop Folder as the download location. The replicant is notified of the creation of a new object and matches it against the Compressed Files rule. The file is unzipped to the desktop (Tracker Add-On) and the compressed file is moved to the trash.

The user connects their camera, which is mounted by the OS as a removable media device. The user drags the photos from the camera to the Sorting Chute replicant which matches each individual file against the Photos rule. The icon of each photo is set to a thumbnail of the photo, created by the Thumbnail action (Tracker Add-On), and the photos are moved to a folder based on the current month and year.

The user has downloaded an application bundle, used the application, and decided that it's worth installing for all users of their computer system. They drag the application to the Sorting Chute replicant which matches the bundle against the "Install Applications" rule and performs the action "Install for All Users" (Tracker Add-On)

References

SVG Screenshots

An advanced form of screenshot could be formed through the use of raw windowing data, SVG and ECMA script allowing for rudimentary interactivity.

Details

The operating system has direct or indirect access to a number of sources of raw and scalable data relating to the currently visible (and obscured) screen. This data could potentially be saved in an SVG file and function in a similar fashion to traditional screenshots but retain rendered accuracy throughout resizes. Controls that rely on rendered bitmap data instead would be embedded as binary data or linked into the SVG document.

In addition to this user visible graphical data the system would save small amounts of other graphical and usability data. All obscured windows, tabs and other such GUI containers would have their data output to SVG in addition to the main visible set. This would be augmented by the addition of small amounts of ECMA scripts that would enable use of the GUI, restricted to non executable functionality. Eg, changing tabs, dragging windows. This would enable the creation of interactive screenshots.

Issues

  • Is there enough sources of raw data for this to occur?

Fusing Tabs

The tabs on BeOS windows have been well known for their distinctive sliding ability. This could be extended by allowing extended areas for sliding, sticky tabs and fusing tabs.

Details


Sliding

Tabs should be allowed to slide all the way around the perimeter of any window, including hugging the corners of the window.

Movingtabs.gif

Sticking

When placed in close proximity tabs in different windows will snap together, bringing the windows together. When this occurs on the side edges of tabs this would result in an arrangment similar to general tabbed interfaces.

Stickingtabs.gif

Fusing

When placed on top of each other tabs would combine together and in that fashion couple the two windows together.

Fusingtabs.gif

Combinations

The strength of this technique lies in the ability to combine multiple windows in a manner more useful to the user.

Fusingtabs-example.gif Stickytabs-example.gif

Issues

  • How easy is this for the user to actually work with? Is it more coherent? Or just cool?
  • How are tabs separated once stuck or fused?

References

Syndicate content