Loading...
 

Usability improvements for File dialog (icon in wiki page editor)

Status
Open
Subject
Usability improvements for File dialog (icon in wiki page editor)
Version
6.x
Category
  • Usability
Feature
File Gallery (elFinder or standard UI)
PDF
Edit interface (UI)
Submitted by
alain_desilets
Lastmod by
alain_desilets
Rating
(0)
Description

Problem Summary 

The dialog structure for uploading a file and adding a link to it in wiki page is much better than it was, thanks to the introduction of the File icon in the toolbar of the wiki editor. But it is still cumbersome and error prone. Here is the process below and the usability issues that I found at various spots.

  1. Click on the File icon
  2. Pick File Gallery/Archive in Type
  3. Click on Pick a file link
  4. Click on the Upload File
  5. Click on the Browse button
  6. Click on Upload button
  7. Browse the file system and pick the file.
  8. Once the file is uploaded, click on its name.
  9. Click on Insert button


Besides the fact that this is long, there are many places where it is misleading to the user (details later). I had to try this more than a dozen times, clicking on different items, to figure out how it works. And I had help from some experts on the mailing list!

Fortunately, there are a number of very small fixes that we could implement to address those issues. See below for a discussion of the various issues and proposed fixes.

Issue 1: Type should have a reasonable default 

Currently, the type is set to empty. It really should be set to either File Gallery/Archive or Attachment by default. Personally, I would favour File Gallery/Archive, because I think it's generally a bad idea to attach files to a wiki page, because it limits your ability to link to those files from other pages. But the point is: the value should default to what users most commonly use.

In some cases, the picklist only has one option in it anyways (ex: if the feature for attaching files to wiki pages is off). In those cases, then the picklist should DEFINITELY default to that single value.

Fix: Set the Type to a sensible default... I vote for _File Gallery/Archive__

Issue 2: Pick a file link looks more like a caption than something you can click on 

I never realized that I could click on it to choose the file. Someone had to actually point that out to me. Others on the mailing list have said that they need to point this out to users all the time.

Fix: Change the link to a button

Issue 3: Too easy to miss the Upload button 

Once you click on pick a file link, you are presented with the general screen for navigating and managing the File Gallery. But at this point in time, you are only intersted in uploading or choosing a file from the gallery, and seeing this complex dialog is very disorienting. In my case, I managed to miss the fac that there was an Upload button on that screen, and I thought I had mad a mistake and someone pressed the wrong button or link in the previous screen. I had to go back to the previous screen several times and click on different things, and finally come back to clicking pick a file, and then I saw the Upload button.

Fix: Instead of having a single Pick a file link (well, button, if we implement the fix to Issue 2), we should have two buttons: Upload and Choose from Server. Or something like that (I can't think of a good workding). The Upload button will take you directly to the place you currently get to after clicking on the Upload button in the File Gallery screen. The Choose from Server button will still take you to the File Gallery navigation and management menu.

Issue 4: Not clear that you have to click on the file name after uploading 

In Step 8, there is nothing that tells you you need to click on the file name after you uploaded it. I went through the whole process several times and it never occured to me that I had to do this until someone from the mailing list told me.

Note that there is a message to that effec that appears if you hover the mouse over the file's name. That message really should be visible at all times, not just when you hover over the file name.

Fix 1: Make it so you don't need to click on the file name altogether.

Fix2: If that's not possible, at least put a very prominent messages saying that the user needs to click on the file name

Issue 5: Insert button is not clear. 

In Step 9, you are back at the original pop up, and you need to click on the Insert button, otherwise the link to the uploaded file does not get inserted.

Again, I had to do the process several times before realizing I had to do this. My natural tendancy was to close the popup, either by Xing it or clicking on the Close button. The result is that the file does not get inserted on the page.

I think the problem is that the two buttons at the bottom say:

Close Insert

And you naturally tend to click on the first of these two, i.e. Close.

Fix: Change the order and caption of the two buttons as follows:


Insert link | Cancel

Also, if the user clicks on the X to close the window, the link should be inserted (in other words, Insert link should be the default). The reason is that it's easier to recuperate from that error (you just need to erase the link) than to recuperate from the other error (you have to start again from the beginning, to insert the link).

Solution
See problem description for the solutions to the various issues raised.
Workaround
Grit your teeth and ask lots of stupid questions on the mailing lists biggrin
Importance
7
Demonstrate Bug
Please demonstrate your bug on show2.tikiwiki.org

 About show2.tikiwiki.org

To help developers solve the bug, we kindly request that you demonstrate your bug on a show2.tikiwiki.org instance. To start, simply select a version and click on "Create show2.tikiwiki.org instance". Once the instance is ready (in a minute or two), as indicated in the status window below, you can then access that instance, login (the initial admin username/password is "admin") and configure the Tiki to demonstrate your bug. Priority will be given to bugs that have been demonstrated on show2.tikiwiki.org.

Version: Create show2.tikiwiki.org instance
Ticket ID
3844
Created
Friday 08 April, 2011 13:57:07 GMT-0000
LastModif
Friday 08 April, 2011 14:00:07 GMT-0000

Attachments

 filenamecreatedhitscommentversionfiletype 
No attachments for this item


Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend, alert + Social Bookmarking
Terms and Conditions
Theme
TikiTests
Timesheet
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools