You might ask, what is UI at all? UI is the acronym for User Interface, which sometimes we refer to as GUI too – “Graphical” UI. In this blog post, I’ll explain how my skins’ user interfaces are organized and why.
A skin’s UI contains all the settings that control how the album will look and what features it will have on the global level. Even though skins can allow some settings associated with individual images – like the Image data panel in Edit mode (see right) – the vast majority of skin settings apply to the whole album. Hence we call them “global settings”.
As skins evolve they receive more and more features, which disrupts the UI sooner or later. (You can’t put as many top-level tabs as the number of different features.) You can see this problem on Chameleon’s UI below.
A deeper structure will be necessary to accommodate everything: the layout-related settings, the features, and the behavior. Undeniably, it’s hard to pick the best organizing principle, and whatever you choose you will certainly end up poking around sometimes to find that special setting.
In my skins, I chose the layout as the main organizing principle, the place where you can find a given feature in the final album. Using instant previews, users got immediate feedback for many settings.
jAlbum’s search functionality is also a great help. Just type in a few letters and jAlbum will show you all the related settings. Tiger skin also has a help system built around concepts in case you cannot find a particular setting by its place. This helps when using my other skins too, as they are using the same (or similar) components.
As you can see, under the Site tab you can find all the generic settings, and those related to the index page, like the top bar, the hero (a.k.a header), and the footer.
The Sections tab has settings for the main content below the header, like the Images (thumbnails), and the Folders – and you can even customize their order by dragging the sections around on the right “Ordering” panel. You’ll find it useful when you want your custom page links below the thumbnails or say, want to have some custom content above the page content.
The Lightbox tab contains settings for the lightbox – you might’ve guessed 🙂 – the large images. In the old times, we called this “Slide page”, but as now we don’t have separate pages for these images in most skins, the word “Lightbox” fits better.
Finally, the Advanced tab has “advanced” settings, like Google Analytics or SEO optimization. You can also add “Custom code” here, e.g. custom CSS styles.
Note, that actual (visible) page content should go into one of the custom content boxes: Site / Top bar / Custom content, Site / Footer / Custom content, or the Sections / Custom section.
As different skins have different main layout features, the main menu might look slightly different:
Animatics skin’s extra features (e.g. Navigation, Map, Social, Background music) can be found under the Control bar tab.
… and the same is true for the Lucid skin.
In Photoblogger skin you have the main content (wide) column, and a sidebar (a narrower column). Typically, the main section contains the thumbnails, the folders, and all content that require wider space, meanwhile, the majority of the functions (Tag cloud, Filtering, Map, Shopping cart, …) go to the narrower sidebar.
The Projector skin has a fixed sidebar with all the control buttons and functions on the left.
Story skin has a floating button bar that controls every function on the page. All related settings can be found under the Functions tab. In Story skin you can have the thumbnails mixed with folders and custom pages, therefore no Sections tab is used here. Instead, the settings for Folders and Images are placed on the Design tab, which also has an instant preview, so you can immediately see what some settings do.
We are aware that jAlbum and its skins’ settings are sometimes hard to grasp. That’s why we are constantly improving the user interface based on user feedback.
Your ideas are welcome too,
Laza
Leave a Reply
You must be logged in to post a comment.