Sketch -> Form
-
Yeah, right. Everyone thinks doing UI is easy, so you might as well have the lowest dork on the totem pole do it. "Give it to the intern, it's not worth anyone else's time." That's why there are so many apps out there that are utter crap. Companies are so enamored of their underlying algorithm or process, they give the UI short shrift. No thought is given to how things should be presented, what controls should be used, or even the vocabulary for the on-screen text. In case you're wondering, I do UI's for our products. The reason I do them is no one else had the stones wanted to do the job. :sigh:
Software Zen:
delete this;Gary R. Wheeler wrote:
That's why there are so many apps out there that are utter crap.
This number of crap apps is squared for web apps where the fluidity and interaction of components based on things as complex as the CSS and HTML specs make UI behaviour so much less deterministic.
-
Hamed Mosavi wrote:
Anyway, such a thing will save hours of work for many programmers in the world, I believe.
No, not really. You could "sketch" a form, but then once it guesses at the controls you want, you would then have to go back and fix all the mistakes it made, naming the controls properly, double-checking partent-child relationships, nesting, blah, blah, blah, ..., pretty much wasting those very hours to tried to save. I can "sketch" a form, dragging and dropping controls faster than I can draw one. At least with dragging and dropping, I can make changes very easily without having to reach for the eraser or another sheet of papper and starting over.
A guide to posting questions on CodeProject[^]
Dave KreskowiakDave Kreskowiak wrote:
I can "sketch" a form, dragging and dropping controls faster than I can draw one. At least with dragging and dropping, I can make changes very easily without having to reach for the eraser or another sheet of papper and starting over.
Yes, I don't understand why so many people just don't see this, but the huge advantage of sketching is where the desired UI requires extensive customization or configuration of components. That is, the user will want something that cannot be achieved by just dragging and dropping out-the-box controls. This especially applies to web interfaces where it often takes large amounts of technical design and calculation to achieve the desired UI.
-
Yeah, right. Everyone thinks doing UI is easy, so you might as well have the lowest dork on the totem pole do it. "Give it to the intern, it's not worth anyone else's time." That's why there are so many apps out there that are utter crap. Companies are so enamored of their underlying algorithm or process, they give the UI short shrift. No thought is given to how things should be presented, what controls should be used, or even the vocabulary for the on-screen text. In case you're wondering, I do UI's for our products. The reason I do them is no one else had the stones wanted to do the job. :sigh:
Software Zen:
delete this;Gary R. Wheeler wrote:
In case you're wondering, I do UI's for our products
For which you have my sincere sympathies, I just wasted 2 weeks trying to get the UI looking precisely like the MDs requirements, what we got was absolute crap, to the point where I am refusing to deploy it! You want a good UI then employ a professional, not a developer, not an intern, get someone trained and skilled in UI design! PS I'm a great believer in battleshit grey!
Never underestimate the power of human stupidity RAH
-
Gary R. Wheeler wrote:
That's why there are so many apps out there that are utter crap.
This number of crap apps is squared for web apps where the fluidity and interaction of components based on things as complex as the CSS and HTML specs make UI behaviour so much less deterministic.
Agreed. I've done a couple intranet web apps for internal support uses, and it's a PITA to get something that looks reasonable on more than a token group of clients. For small scale deployments, you simply don't have the time or resources to test more than three or four browser/version combinations.
Software Zen:
delete this; -
Gary R. Wheeler wrote:
In case you're wondering, I do UI's for our products
For which you have my sincere sympathies, I just wasted 2 weeks trying to get the UI looking precisely like the MDs requirements, what we got was absolute crap, to the point where I am refusing to deploy it! You want a good UI then employ a professional, not a developer, not an intern, get someone trained and skilled in UI design! PS I'm a great believer in battleshit grey!
Never underestimate the power of human stupidity RAH
I've actually learned to like doing the UI stuff. It just pisses me off that people are so dismissive about it.
Software Zen:
delete this; -
I've actually learned to like doing the UI stuff. It just pisses me off that people are so dismissive about it.
Software Zen:
delete this;Have them spend 2 weeks fucking about with colours,shades and little graphicky things and they will lose the cavalier attitude. I am starting to push for a dedicated designer to be added to the teams asking a developer to do this crap is counterproductive!
Never underestimate the power of human stupidity RAH
-
Sketchflow[^] will do what you want, though you need to draw into the machine directly (32 mins into the vid).
“Education is not the piling on of learning, information, data, facts, skills, or abilities - that's training or instruction - but is rather making visible what is hidden as a seed”
“One of the greatest problems of our time is that many are schooled but few are educated”Sir Thomas More (1478 – 1535)
This is cool, but I have something different in mind. (SketchFlow reminds me of Macromedia Flash times, by the way.) I was thinking more about a markup generator from a drawing, not extracting images to show in the flow, but real controls.
-
Hamed Mosavi wrote:
Anyway, such a thing will save hours of work for many programmers in the world, I believe.
No, not really. You could "sketch" a form, but then once it guesses at the controls you want, you would then have to go back and fix all the mistakes it made, naming the controls properly, double-checking partent-child relationships, nesting, blah, blah, blah, ..., pretty much wasting those very hours to tried to save. I can "sketch" a form, dragging and dropping controls faster than I can draw one. At least with dragging and dropping, I can make changes very easily without having to reach for the eraser or another sheet of papper and starting over.
A guide to posting questions on CodeProject[^]
Dave KreskowiakDave Kreskowiak wrote:
it guesses
Honestly I haven't been working with NN and image processing after college, if it's still that immature, then it's kinda sad!
Dave Kreskowiak wrote:
I can "sketch" a form, dragging and dropping controls faster than I can draw one.
Maybe! Most of the time is wasted on layout, naming, resources and stuff like that for me. I think many of such tasks can be automated.
-
Have them spend 2 weeks fucking about with colours,shades and little graphicky things and they will lose the cavalier attitude. I am starting to push for a dedicated designer to be added to the teams asking a developer to do this crap is counterproductive!
Never underestimate the power of human stupidity RAH
Mycroft Holmes wrote:
Have them spend 2 weeks f***ing about with colours,shades and little graphicky things and they will lose the cavalier attitude.
Rather, have them spend two days before they even begin, making sure that colours,shades and little graphicky things are decided, and the decisions are down on paper, so that they can build templates and style sheets (real style sheets, not the ones beginning with "C"). That way, everything is in approved colours and shades right from the word go, so there's no room for argument, and the little graphicky things can all be set at fixed sizes, so that if someone wants one changed, they can provide the new graphic (which must only use approved colours and shades) of the right size, so that it can just be inserted to replace the former one. The main thing to get across is "We are doing this professionally, and are working to professional standards, so if you want something changed, you'd better have damned good, and fully documented, reasons for it". Too often, developers allow themselves to be walked all over, when they move into UI design, because they think (sometimes rightly, sometimes not) that they're not qualified and/or or skilled enough to do it, but the point is not that you have to be highly qualified or skilled; you just have to be professional, and refuse to allow unprofessional behaviour in others. That a prototype UI design is not perfect means that it is a work in progress; it does not mean that everyone can just jump in and behave like little kids in a sandpit. A very useful thing to include at the end of a UI demo is a change-request form. Do not accept changes without a change-request form -- force everyone to keep it professional.
I wanna be a eunuchs developer! Pass me a bread knife!
-
Mycroft Holmes wrote:
Have them spend 2 weeks f***ing about with colours,shades and little graphicky things and they will lose the cavalier attitude.
Rather, have them spend two days before they even begin, making sure that colours,shades and little graphicky things are decided, and the decisions are down on paper, so that they can build templates and style sheets (real style sheets, not the ones beginning with "C"). That way, everything is in approved colours and shades right from the word go, so there's no room for argument, and the little graphicky things can all be set at fixed sizes, so that if someone wants one changed, they can provide the new graphic (which must only use approved colours and shades) of the right size, so that it can just be inserted to replace the former one. The main thing to get across is "We are doing this professionally, and are working to professional standards, so if you want something changed, you'd better have damned good, and fully documented, reasons for it". Too often, developers allow themselves to be walked all over, when they move into UI design, because they think (sometimes rightly, sometimes not) that they're not qualified and/or or skilled enough to do it, but the point is not that you have to be highly qualified or skilled; you just have to be professional, and refuse to allow unprofessional behaviour in others. That a prototype UI design is not perfect means that it is a work in progress; it does not mean that everyone can just jump in and behave like little kids in a sandpit. A very useful thing to include at the end of a UI demo is a change-request form. Do not accept changes without a change-request form -- force everyone to keep it professional.
I wanna be a eunuchs developer! Pass me a bread knife!
Thanks Mark, I needed a good laugh on Monday morning, nail down UI specs indeed, we can't even nail down the application requirements let alone the UI. I would love the luxury to actually force the business to supply clear requirements but they don't know what they want and certainly don't know what they can get from a system. We work on an iterative process, here is the first draft of what we think you want, they then get to define the next set of requirements based on that. It's almost like agile without the formal agile crap that goes with it! I did get a laugh when the MD pointed us to another group who are spending $m on their new design and asked why we, a bunch of data oriented developers, could not even deliver what he wanted.
Never underestimate the power of human stupidity RAH
-
This is cool, but I have something different in mind. (SketchFlow reminds me of Macromedia Flash times, by the way.) I was thinking more about a markup generator from a drawing, not extracting images to show in the flow, but real controls.
IIIRC Sketchflow generates XAML screen prototypes :~
“Education is not the piling on of learning, information, data, facts, skills, or abilities - that's training or instruction - but is rather making visible what is hidden as a seed”
“One of the greatest problems of our time is that many are schooled but few are educated”Sir Thomas More (1478 – 1535)
-
I was wondering today, while drawing sketch of a form, if there is any tool that can use image processing to convert a drawing to generated code for a
XAMLorHTMLform. Drawing a sketch is very fast and much easier than dragging controls on a form and I guess it wouldn't be impossible to build something like an NN to process parts of a photo of an sketch to extract controls and generate a form based on them, although extracting handwritten text might not be that easy. Anyway, such a thing will save hours of work for many programmers in the world, I believe. Any prior attempt or any idea? -
I was wondering today, while drawing sketch of a form, if there is any tool that can use image processing to convert a drawing to generated code for a
XAMLorHTMLform. Drawing a sketch is very fast and much easier than dragging controls on a form and I guess it wouldn't be impossible to build something like an NN to process parts of a photo of an sketch to extract controls and generate a form based on them, although extracting handwritten text might not be that easy. Anyway, such a thing will save hours of work for many programmers in the world, I believe. Any prior attempt or any idea?If your sketch is accurate enough that it's actually a design, that's impressive in itself. But how would it know whether this control is supposed to be positioned at (305,267px), or 'half way down the page', or 'just below that thing'? What about the names, data bindings, default text, captions, keyboard shortcuts and behaviour of the controls? How would it know which control type that wonky rectangle on the page represents? How the grouping of controls that are drawn near each other should work?
-
Dave Kreskowiak wrote:
it guesses
Honestly I haven't been working with NN and image processing after college, if it's still that immature, then it's kinda sad!
Dave Kreskowiak wrote:
I can "sketch" a form, dragging and dropping controls faster than I can draw one.
Maybe! Most of the time is wasted on layout, naming, resources and stuff like that for me. I think many of such tasks can be automated.
It's not really the basic NN that's going to be the problem. Sure, it can see a box and figure it's a TextBox control, oh wait, maybe that's supposed to be a combo, ... or it could be a listview. It's hard to tell from 4 wavy lines. The point is, you'd have to use some kind of invented shorthandto tell it exactly what kind of control you're really sketching. Another problem is scaling. How wide does this system make the initial form? How high? How wide and tall are the controls supposed to be? Again, it's going to require hints to figure this out. More shorthand. It's just not practical in the real world as you would have to go back and tweak everything it guessed at to arrange the form. That's time you have to waste going back through every little detail to make sure it's correct. That time he's trying to save is now wasted. About all this project would be good for is a final thesis.
A guide to posting questions on CodeProject[^]
Dave Kreskowiak -
It's not really the basic NN that's going to be the problem. Sure, it can see a box and figure it's a TextBox control, oh wait, maybe that's supposed to be a combo, ... or it could be a listview. It's hard to tell from 4 wavy lines. The point is, you'd have to use some kind of invented shorthandto tell it exactly what kind of control you're really sketching. Another problem is scaling. How wide does this system make the initial form? How high? How wide and tall are the controls supposed to be? Again, it's going to require hints to figure this out. More shorthand. It's just not practical in the real world as you would have to go back and tweak everything it guessed at to arrange the form. That's time you have to waste going back through every little detail to make sure it's correct. That time he's trying to save is now wasted. About all this project would be good for is a final thesis.
A guide to posting questions on CodeProject[^]
Dave KreskowiakYou're right and that's my point. How come I can often make right decisions if I see a sketch like that and computers can't yet. I thought maybe machine learning has grown to the point which is capable of doing such stuff with good enough accuracy.
-
IIIRC Sketchflow generates XAML screen prototypes :~
“Education is not the piling on of learning, information, data, facts, skills, or abilities - that's training or instruction - but is rather making visible what is hidden as a seed”
“One of the greatest problems of our time is that many are schooled but few are educated”Sir Thomas More (1478 – 1535)
I didn't see that in the video. Maybe they have that in mind, gotta look closer at that project. Thanks anyway. :)
Planning to move to Germany, looking for a job there!
Looking for a Windows desktop programmer? I look forward to hearing from you! :-) -
I didn't see that in the video. Maybe they have that in mind, gotta look closer at that project. Thanks anyway. :)
Planning to move to Germany, looking for a job there!
Looking for a Windows desktop programmer? I look forward to hearing from you! :-)No worries.
“Education is not the piling on of learning, information, data, facts, skills, or abilities - that's training or instruction - but is rather making visible what is hidden as a seed”
“One of the greatest problems of our time is that many are schooled but few are educated”Sir Thomas More (1478 – 1535)
-
If your sketch is accurate enough that it's actually a design, that's impressive in itself. But how would it know whether this control is supposed to be positioned at (305,267px), or 'half way down the page', or 'just below that thing'? What about the names, data bindings, default text, captions, keyboard shortcuts and behaviour of the controls? How would it know which control type that wonky rectangle on the page represents? How the grouping of controls that are drawn near each other should work?
BobJanova wrote:
how would it know whether this control is supposed to be positioned at (305,267px)...
These are details and solution to such nonlinear problems, as much as I recall from university, are Neural Networks, genetic algorithms and the like. I have not updated myself on that branch of science and thus have no idea if it is possible or practical to do it or not. I was hoping among readers someone with such a profession might share ideas. Maybe we could start an open source project together! :)
-
Mycroft Holmes wrote:
Have them spend 2 weeks f***ing about with colours,shades and little graphicky things and they will lose the cavalier attitude.
Rather, have them spend two days before they even begin, making sure that colours,shades and little graphicky things are decided, and the decisions are down on paper, so that they can build templates and style sheets (real style sheets, not the ones beginning with "C"). That way, everything is in approved colours and shades right from the word go, so there's no room for argument, and the little graphicky things can all be set at fixed sizes, so that if someone wants one changed, they can provide the new graphic (which must only use approved colours and shades) of the right size, so that it can just be inserted to replace the former one. The main thing to get across is "We are doing this professionally, and are working to professional standards, so if you want something changed, you'd better have damned good, and fully documented, reasons for it". Too often, developers allow themselves to be walked all over, when they move into UI design, because they think (sometimes rightly, sometimes not) that they're not qualified and/or or skilled enough to do it, but the point is not that you have to be highly qualified or skilled; you just have to be professional, and refuse to allow unprofessional behaviour in others. That a prototype UI design is not perfect means that it is a work in progress; it does not mean that everyone can just jump in and behave like little kids in a sandpit. A very useful thing to include at the end of a UI demo is a change-request form. Do not accept changes without a change-request form -- force everyone to keep it professional.
I wanna be a eunuchs developer! Pass me a bread knife!
Not to rain on the parade, but I would be terminated with extreme indifference if I tried something like that. I work for a hardware company, where software engineers are treated like the congenitally defective cousin you keep locked in the attic because they can't be trusted not to masturbate in public. We have virtually no say in product features, and our voices are the least respected in the place. Within the software group, UI issues have lowest priority, since they're farthest from the hardware. It may sound paranoid, but a lot of the time I feel like I'm the only person who gives a rat's ass whether or not our customer can actually use their $2.5M toy...
Software Zen:
delete this; -
I was wondering today, while drawing sketch of a form, if there is any tool that can use image processing to convert a drawing to generated code for a
XAMLorHTMLform. Drawing a sketch is very fast and much easier than dragging controls on a form and I guess it wouldn't be impossible to build something like an NN to process parts of a photo of an sketch to extract controls and generate a form based on them, although extracting handwritten text might not be that easy. Anyway, such a thing will save hours of work for many programmers in the world, I believe. Any prior attempt or any idea?Hamed Mosavi wrote:
Drawing a sketch is very fast and much easier than dragging controls on a form
It sounds to me like you need to spend a little time learning how to use the resource editor efficiently for your favorite IDE. This does sound like some of the CAD programs I've seen. One used gestures to insert objects or perform operations. Unfortunately the gesture language was complex and took a long time to learn.
Software Zen:
delete this;