This post are notes for the new control panel for Tabulas that I'm going to start building in the upcoming weeks. I'd be interested in hearing any ideas you have or any criticisms.

Entry Control Panel

One of the biggest features I want to fix for Tabulas is the new control panel. I've been slowly jotting ideas and sketching general layouts over the past two weeks; since yesterday after work, I've generally translated these ideas into some screenshots. These screenshots will hopefully give you a glimpse of what type of work I've been doing for Tabulas (behind the scenes) and give you an idea of where I'm trying to push Tabulas in terms of usability.

First, the general screenshot:

General notes about this

This advanced panel will require users to use at least a 1024x768 resolution to view. I will most likely add in a specific version for 800x600 resolution users, but I've decided to generally not care about 800x600 resolution users.

(This could be a huge mistake, but in general my projects will require at least 1024x768 resolution with a modern browser (IE 6.x or Firefox). I know proper "development" calls for graceful degradation, but honestly I have no patience for people who can't upgrade. If you want to use an awesome site, get the proper browsers.)

I will most likely drop support for the non-WYSIWYG editor, meaning all entries will be automatically "advanced." Since TinyMCE provides support for editing HTML, this shouldn't be a huge deal.

I've made a huge effort to keep the thing as neat and clean as possible; there do seem like a lot of options, but the default behaviour for all those sections will be collapsed. (Except "Entry Options"). You can see the little minus signs; clicking those will collapse the relevant section.

Live preview

Clicking the "live preview" tab will show how your entry will look with all the formatting. It will also outline exactly where your entry is being crossposted and who can see it (if you set really advanced privacy levels, you may want to know exactly who).

I'm also thinking of putting the spell-checker into the live preview, but that's to be determined later.

Entry title

After you type in a title, the page will automatically update the "Future permalink" location so you know where the entry can be located after you post it. I actually haven't decided if this is entirely useful, so it may not make the cut into the final page.

You can see that the future permalink displays user subdomains; this is a feature that *will* be added into Tabulas! Whether or not it will be for all users, I've yet to decide. I've been experimenting with Listfoo and got it to work, so it's just a matter of applying it to Tabulas.

I could go off on a whole another post about the importance of the permalinks in the new Tabulas, but for the time I'll say this: every page in your Tabulas will be accessible by a permalink; even your friends page. There will be redirects placed if you are to edit a page title (thus changing its permalink).

Entry body

I think nothing new will be done here, except the addition of an auto-save feature (see the bottom). Every 30 or 60 seconds, the page will autosave your entry (which includes any "currently ..." information, your entry options, and any images you attach to the entry). In case your computer crashes, you accidentally navigate away, or you have to quickly close your browser cause your boss walks in, Tabulas will have a fresh copy of your last entry.

Attach images

Attaching images to an entry was a feature I used to have on Tabulas, but I took it out because I found it incredibly inadequate (and I rather cut an inadequate feature than leave it in to frustrate users). One of the benefits of Xanga is its ability to post images *in* entries themselves. Most people just want to share images instead of having to upload to your gallery, then navigate there to find the images. There should be one location for it!

So you'll be able to attach images to your entry and have it post into your gallery albums at the same time ... this should make uploading them really easy! You'll also be able to add albums from this page as well, so you don't have to navigate to the gallery to create an album.

Privacy

A feature I've been talking about for a year is custom friend groups - I think this will be a huge boon to people who want only a certain subset of people to see a certain post (that's happened to me in the past). Publishing tools like this should keep you in full control of who sees your content. Because the privacy rules for Tabulas can get very complex, (privacy levels can be attached to a journal-level, category-level, or post-level), your "view your live preview" tab will clarify.

For example, if I post an entry to a friends-group "Blah" but I have a category setting of "Private", then the preview will say "You want to post to custom friends group "Blah" but your category "Private category" will set a privaty level of "private" on your entry.

Also, if you select more than one friends-groups, it will combine the two groups and show you the exact Tabulas username list of people who can see your entry.

Profile

Don't you hate setting the same options again and again (ping, crosspost, categories, etc.?). I certainly do, and with the slew of options you can set, a great feature I figured I would implement would be a "save profile" feature. This will save your current options (like which categories you're posting to, the privacy level, etc.). You can quickly use one of your pre-saved profiles to apply it to a new post. Quick and easy!

Conclusion

I think the hardest part in developing these types of control panels is figuring out how to get started. This entry and the screenshots provide a great outline for me to follow, and I really think that if I get this control panel implemented, it is really going to make posting to Tabulas incredibly easy and *fun*, and that's exactly where I'm trying to get Tabulas.

Currently listening to: James Blunt - Too Late
Posted by roy on February 4, 2006 at 05:45 PM in Tabulas | 17 Comments

Related Entries

Linked Entries

These are Tabulas entries which have linked to this particular entry.

Want to comment with Tabulas?. Please login.

Comment posted on February 10th, 2006 at 02:48 PM
This new control panel really looks good! Amazing, but complicated. I really like it...but what if I had to "rush type" it...I'd have to wait for it to load. But AMAZING.
Comment posted on February 5th, 2006 at 11:12 PM
Hi that is wonderful news and the new control panel looks really cool. I have this problem. Whenever I try to post-date an entry so that tabulas will display it only on a future date and also cross post it to say LJ, tabulas displays it only on the said date but I can see the entry on LJ instantaneously. Could that be stopped?
Also, when we edit a tabulas post later, it obviously does not edit the LJ post.
Another thing is that the "Edit entries " lists all the entries and one can use the jump to page option only. It would be more intuitive to have edit by category (something like you have for the advanced gallery).
I don't know whether it is relevant here, but nested albums is something that I have been waiting for a long time.
Just one more: Whenever someone searches in google and my page shows up, the link they get is usually the categories page or the jumpx.html, but not the page that actually contains the data they were looking for. It would be so nice if the search results in the exact post entry page.
Comment posted on February 6th, 2006 at 01:28 AM
Hey,

I'll have to take a look at the xposting issue. My guess is it won't be an easy fix, so you may have to wait. In general, xposting isn't very well supported; I realy just developed it to see if it could work - in the new version, I want to add support for editing posts updating your relevant posts in your other journals.

nested albums is definitely coming. patience, there :)

and yes, the URL linkage annoys me as well. part of it's google, but part of that problem will be fixed when i apply the new URL naming schema for tabulas.

so basically, i am aware of *all* those issues and they will *all* be addressed :)
Comment posted on February 5th, 2006 at 02:39 PM
This looks very exciting! Not having to scroll down to choose all the options... goodie. :)

The design is nice too. Neat and simple.

The picture upload thingy... Looks like a lot of fun to me.

Soooo, exciting!
Comment posted on February 5th, 2006 at 01:48 AM
This is definitely a huge concern, and I'll probably address it in later iterations; I'm leaning towards having at least "one" click that will display all the sections.

if I go this way, I would imagine that all sections would be expanded by default.

Thanks for the suggestion.
Comment posted on February 4th, 2006 at 11:37 PM
this is amazing.. seriously..
Comment posted on February 4th, 2006 at 08:56 PM
definitely stoked about being able to add pictures. looks like it's gonna be sweet, but i think what would be a little more aesthetically pleasing would be to make everything less boxy...curves are more pleasing to the eye :)
Comment posted on February 4th, 2006 at 08:38 PM
I like the new look, and the privacy improvements.

I have been having trouble with maintaining the font style and size. I've tried choosing the font and size before beginning to type, but each time I hit return I have to re-choose the font and size. If I type it all first and then try to change the font and size, sometimes it won't allow me to make the change. Once I had half the piece in one font but couldn't change the rest of the formatting. That is something I'd like to see improved in the new setup.
Comment posted on February 4th, 2006 at 10:43 PM
Yeah, that's a problem with the editing program (that's not me). I would suggest that ifyou're always using the same font and styles for each post, you set those styles in your page styles instead of setting them per-entry.
Comment posted on February 4th, 2006 at 08:13 PM
Omg, that's the sexiest thing ever. *faints* I'm sooo excited about the picture option. So excited! I use to use photobucket and then relink, but with this , I won't have to. w00t!
Comment posted on February 4th, 2006 at 08:02 PM
Wow that's looking great. Very fresh and clean-cut look.

I like how all the options are on the side of the entry, makes more convenient to look at while your tying your entry.

One suggestion that I do have that I though about a long time ago is for that options part where you can put in what your currently reading, watching or listening ... what about playing? I'm sure a lot of Tabulas users are gamers, so maybe their currently playing a pc, ps2, x-box/x-box360, gamecube game or something. Just a thought though.
Comment posted on February 4th, 2006 at 06:37 PM
not sure if you've realized this already, but sometimes when cutting and pasting text, it won't reformat the text ie: bold, font size. this happens frequently when the block of text had multiple types of fonts that i try to paste into one uniform type. does this make sense?
Comment posted on February 4th, 2006 at 10:46 PM
Yeah, that's an issue with the editor; I didn't write that, I'm using another program for that.

I know we've had this problem at work too, and it's a complex issue that's pretty hard to deal with.
Comment posted on February 4th, 2006 at 07:45 PM
roy this looks amazing. seriously. i'm getting exciiteeed haha

but about wat hapy said...
i'm not sure if he's saying he wants like differet font types to be reformatted into ONE font type... and i think at times i want that - so the copied text matches the rest of my entry...

but other times i want it to preserve the formatting... like when you copy a convo from AIM, i wish tabulas could preserve the Blue/Red Times New Romans Screen Names with the different fonts of the people. wen u post a convo and it doesn't have that RED/BLUE username distinction sometimes it's hard to keep track of who said what and stuff...
i'm not sure if it's possible to preserve the AIM formatting onto a website, but yeah... that would be nice.

also, the like look+feel of the new control panel IS more *fun* than it is now, but i think it can be even FUNNER. not more fun. FUNNER. iono, like the whole Apple thing - their site and stuff is *fun* because it's so clean, simple, and ROUND. like it's not flat and boxy. you know? it's like Bubbly. and i think it's aesthetically pleasing. so like the buttons for "Post Entry" and stuff could be made a lil more bubbly i guess. and maybe even the right Entry Options section, instead of being bordered by a rectangle, it can be a rectangle with rounded corners - if you go to the <a href="http://www.apple.com">Apple website</a>, none of the borders are strict rectangles, they're all like rounded on the corners. i know it's a small detail, but i think those small details make a big difference.

also, i think the gray color behind the text for "Entry Options," "Additional Entry Info," etc. decreases the *fun* factor a teensy bit... maybe a more fun color and make it bubbly again like the <a href="http://images.apple.com/t/2006/us/en/i/4.gif">navigation tabs</a> at the top of the Apple website... actually gray's not that bad, the apple site uses it too, but it's a much lighter shade of gray on the apple site which makes it look nicer i think..

one last thing - font type for "Entry Title," "Entry Options," etc. i think it's Georgia or something, but yeah. it doesn't look as clean as it could be if it were a different font or different font size. like Arial for example. i think there are 2 main reason for using a font like Georgia or Times New Romans:

1. when there's A LOT of text close together. like in a book, the font is always like a font similar to Times New Romans - with the little stems at the ends of the letters and stuff. i heard that those stems make it easier to read because it gives each individual letter more uniqueness so it's easier for the mind to identify each letter. for example, if you were to print a page of text single spaced size 10 Arial font. it would be hard to read, and easy to lose your spot when skipping lines when compared to the same page printed at size 10 Times New Romans font. those little stems at the ends of the letters make A LOT of text easier to read. that's why you do not often see works of art or advertisement using Times New Romans font - it is unncessary. however there are exceptions, and there are times when ads or art use Times New Romans and that is when...
2. it is used for an artistic purpose. if the mood or feeling you're trying to get across is supposed to be sophisticated, scholarly, or serious.
but seeing as that you are not using a lot of text, and you are not trying to make it serious, but rather, more *fun*, i think it would be better if you changed to a font-type that doesn't have stems and that is *cleaner*.
at least, that's my personal opinion.

but iono, maybe i'm wrong, but i just wanted to let you know what i thought and present the reasons for my opinions. or maybe you agree with me, and it's just hard for you to implement these things when considering other practical factors like, how long it will take for the control panel to load and stuff.
but yeah, these are my suggestions/opinions to make the UI more aesthetically pleasing/*fun*...

feel free to disregard my suggestions according to your own sense of what is beautiful, i'm sure the end result will still be magnificent.

w00t tabulas~!
btw, the auto-save feature...

AWESOME.
Comment posted on February 5th, 2006 at 01:56 AM
holy smokes. you wrote that into the itty bitty comment box? good job ;)

obviously the styling isn't done by a long shot - i'm sure it'll go through at least 3 different design changes from my end - the "post entry" button was actually modified three times before i got sick of it and just threw up a default one in the screenshot.

i'm trying not to imitate apple's stuff too much. i get enough of that type of pressure at work, and it's not really my style.

your sans-serif vs. serif argument:
yes, mostly true. generally if you want to also differentiate between header text and body text, you switch between the two. since i use sans-serif for body text, i use serif for headers; georgia is the only decent serif font, so i picked it. but again, that's probably going to change as i address the aesthetical issues - this first pass is just for functionality; i've given almost no thought to the aesthetics yet as i have towards functionality.

form follows function. so it's more important during the initial steps that i focus on layout and how the user will interact, but you bring up quite valid points.
Comment posted on February 5th, 2006 at 10:40 PM
yeah, i was bored. haha
Comment posted on February 4th, 2006 at 11:35 PM
-____-;;

just the fact that you have the longest comment out of everyone shows that you're going to harvard