Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I need a better way to of working with the textarea on the left without relying on the horizontal scroll for large amounts of text. Atm it's a horrible UX editing large amounts of text.

This is an angularjs + fabricjs app. The UX is a work in progress.

I was working on a native form of: http://usablica.github.io/widearea/ Unsure if that solves the problem or is just a bandaid.

Forgot to mention

Editing in the preview will be coming in the future this is something I need to fix temporarily for our launch.

enter image description here

Was thinking of moving in this direction with the UI.

enter image description here

Update 1

After some of the comments going to see if this solves the issue.

enter image description here enter image description here

Update 2

It ended up looking like this: enter image description here

share|improve this question
    
The ideal solution would be for the user to edit the text in place, and not use a separate textarea at all. The space available would be the actual space taken by the rendered text. Obviously, it's more difficult to implement. The WideArea is really neat but the issue would be that the user wouldn't be able to see how the text is rendered while typing it. –  jgthms Mar 16 at 21:34
    
@jgthms That will be our solution in the future, it's a technical challenge vs time available issue atm trying to make what we have work good and then launching it. I wonder what would happen if instead of the WideArea taking up 100% of the screen it only took up the bottom half and scrolled the canvas into the top half area. –  Michael Calkins Mar 16 at 22:06
add comment

3 Answers 3

up vote 1 down vote accepted

I am not familiar with the framework but why not have an option to edit the text directly in the preview? Double click, edit and save.

Or double clicking on the preview would load up a centered text area block that you could edit (z-index:9999;horizontal-align:center;)

Have a look at this simple document writer design in Mac Pages.

enter image description here

If you can code it then you should probably not have a text area in the left bar at all.

Your workaround is nice thou :)

share|improve this answer
    
You raise some excellent points and ty for that image of Pages (I use google docs xD). This is html5 canvas I'm working with it's possible just tricky. –  Michael Calkins Mar 16 at 23:29
    
The best strategy is usually to look up and use an existing solution that makes sense. Ff you can copy and re-use while also saving you time and making your end product better, then why not :) –  Marek Andreánsky Mar 17 at 1:03
    
After I saw that pic I realized it wasn't just the textarea but the entire layout so I just went at it based on this pic and the other one I mentioned above. :) –  Michael Calkins Mar 17 at 3:23
add comment

Im not sure if ive fully understood the question, but couldnt you have the text area 200px high and then as the user inputs their text instead of the text area gaining a scroll bar the text areas height would increase.

share|improve this answer
    
That's what I had before but as you type it word wraps and the canvas doesn't word wrap so it was inconsistent . –  Michael Calkins Mar 16 at 22:15
add comment

I think being able to edit the text inline would be ideal.

If that's not feasible. Then I would recommend expanding the text-input box when it is selected. Ex. If it's currently 100x100px then make it 400x400px. As well, adding a slight shadow to the box will help make it appear active.

share|improve this answer
    
Do you mean automatically? On focus, expand the textarea, on blur, make it small again? –  Michael Calkins Mar 17 at 0:44
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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