4

One of my client must be able to post News to both french and english language on his website. I would like to know how I should design the CMS to be the most convenient for the admin as possible.

Below is captures of what I thought would solve the problem but I doubt it's the best way to do it as I am no UX expert.

enter image description here

I would like your advices on that if possible.

Improve this question
7
  • @Cybrix - You can still edit questions that are closed. And if your question becomes a valid question for the format, the mods will gladly reopen it. – Charles Boyung Mar 8 '12 at 12:53
  • @Charles, I didn't know that. Thanks for the info. – Cybrix Mar 8 '12 at 16:15
  • @Ben and Charles, I have edited the question. I hope it is fine! – Cybrix Mar 9 '12 at 0:40
  • Sorry if you didn't realize you could edit closed questions. This looks good but the title could use a tune up as well. Thanks for the great mock ups, makes it much easier to understand what you're suggesting. – Ben Brocka Mar 9 '12 at 1:17
  • @Ben, no problem :)! I am not sure if that new title is suitable. If not, I wouldn't mind if someone else edit it. – Cybrix Mar 9 '12 at 1:29
2

Vertical workflow is more natural than horizontal unless the user is comparing content side-by-side. Moreover, horizontal arrangement requires users to have very wide monitors to work comfortably. Finally, there's no need to force users into a particular sequence of languages - let them decide what version is going to be posted first.

Thus, the mock-up will look like this:

enter image description here

Note that the radio buttons should be listed vertically despite the available space in the line (unless you have multiple columns of languages) and that the "Add translation" button should be placed closer to the editor than to the publishing controls.

Clicking "Add translation" (or whatever you want to call it) should duplicate the language selector and the editor controls right above the button so that the publishing controls stay separate from the editor.

Improve this answer
8
  • And if you click "Add translation", will you get the same radiobuttons? Or maybe they can be disabled and the second language automaticly selected for visual hint? – Cybrix Mar 9 '12 at 3:35
  • Yes. Both should be duplicated and the language that has been already selected can be disabled (you can figure out this part with user testing - I didn't want to suggest it right away because it's not "over-the-counter best practices"). – dnbrv Mar 9 '12 at 3:45
  • I like your solution alot! – Cybrix Mar 9 '12 at 3:49
  • @Cybrix: Just let the question be open for another 10-12 hours until Europeans wake up and get to it. Maybe someone will simplify it even further. – dnbrv Mar 9 '12 at 3:53
  • One thing I like about it is that you could have maybe a third language and it wont "overfull" your page (unless you want to write a news in the 3 languages) – Cybrix Mar 9 '12 at 4:11
2

You can populate English by default based on your users.

So we can move to top for other language option, then we populate the other editor options like below Image.

enter image description here

You can remove the "preview option" if you have "preview" button after the submit.

Improve this answer
7
  • Tabs are a great way to save vertical space but they make it hard for the user to see, which language already has content. – dnbrv Mar 9 '12 at 4:46
  • You can edit the both content using tab navigation. Also you can compare using "preview" option. NOTE: WE can have some link like "revert to original msg" around the submit button. – jelumalai Mar 9 '12 at 4:51
  • If you have more than 2 languages, using preview become cumbersome. – dnbrv Mar 9 '12 at 4:52
  • Probably we can have upto 6 language based on the editors' width. Preview: we can have horizontal preview option like Trello.com – jelumalai Mar 9 '12 at 4:54
  • You can't judge how much of something can fit in a low-fi wireframe - it's only reference points for placement of elements. And horizontal scrolling works only with horizontal workflows - that's why Trello is an outlier. – dnbrv Mar 9 '12 at 4:58
0

I've designed one that handles this case quite elegantly (see my profile). Typically when visiting a website you have the URL dictate the language of the website. This is necessary for good SEO as each page has it ensures each language version has its own unique URL. For example US English would be region prefixed with "/en-us/my-page" and France French would be "/fr-fr/my-page" or something like that. I can't remember the French ISO code so forgive my mistake, if so.

I do websites that have dynamic URLs so they are actually all going to the same source file for the second part of the URL after the language prefix yet they have a masking of the URL. For example, the two URLs that have "my-page" above will be mapped to a single "my-page.cshtml" code page that is handled. The region is determined by parsing the URL first directory as a parameter and using that as a prefix to any content ID that I pull. Say there is a title on each page. For the "my-page", you would have a title content id of "en-us-my-page-title" and another "fr-fr-my-page-title" for example.

What I did really has not been done before for programmatic websites. It removes the need for an admin altogether and combines visiting the website and navigating it as you normally would yet having the capability to edit it in place. It combines the usability of PageLime but in a feed-like, HTML5 way built for large-scale programmatic and dynamic websites. It's completely different. If you want to try building something that is truly a cut above, try that approach.

Improve this answer
5
  • Very interesting approach indeed! – Cybrix Mar 9 '12 at 3:40
  • @kitgui.com: How do you edit your content without an admin section? An average user can't go into the source of CSHTML or a desktop editor like Web Matrix that connects straight into the database. Also, from the SEO point of view, giving an English URL slug to a page in French is a bad idea. – dnbrv Mar 9 '12 at 3:52
  • Yes exactly. You can go to kitgui.com and see. :) Its not like you think. Not even close based on your comment. Of course I 100% agree with you. Just take a look and it will connect. – Jason Sebring Mar 9 '12 at 4:59
  • You can have en-us as your default without prefix or what I do for SEO is postfix on a lot of things so you can glean the pattern at the end. – Jason Sebring Mar 9 '12 at 5:01
  • @dnbrv I challenge you to look at it and critique it. I think it will blow your mind if you didn't think about this before. PageLime is a designery tool for FTP-based stuff and its a toy basically. The challenge is to get that type of usability but in a large-scale dynamic feed-way. – Jason Sebring Mar 9 '12 at 5:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.