There's probably a ton of stuff I'm probably missing but recently I was thinking how viable it would be on forms to have users perform an action in the UI such as drag/drop a (for example) paper widget into a box widget (possibly also randomly placed on the page) to represent submission of a form.
The idea behind it being, find some action that a human would more likely be able to perform than a bot. Would this in any way prevent spambots?
(I'm laughing as I type this btw, but I just wanted to see how crazy this idea really seemed)
Sadly I don't think it would help. All that happens when a user clicks, drags and drops a component is that events (like click) get fired. You could just as easily fire those events programmatically if you were a spambot. Nice idea though.
Like most home-made spam prevention methods, it'll work until your site is large enough that a spammer decides to pay some specific attention to your site -- at which point, it'll be broken to pieces. But there's no need to get as fancy as what you're describing. Spam-protection methods as simple as "type 'orange' into this box" or "what is one plus one" will work just as well, as long as your site is only being hit by automated tools.
Related
I'm using AngularJS 1 with angular-material and ui-router.
Does anyone know what the best practice is for providing a UI for some "new foobar" type thing? In other words, let’s say I have a ui.route putting me at /app/#/foobars/ which shows a list of all the foobars. At the bottom right is a FAB with a big plus sign, which will bring up a new UI something to allow the user to specify how they want their foobar. What is the best practices for this "UI something" that comes up, using Angular?
Should I use an angular-material dialog? (That’s my first inclination, but it seems old-fashioned.)
Do I create a route to /app/#/new-foobar/ and just bring up another UI? (This seems heavy-handed; I don’t want to change the URI, plus I probably want to get back to where I came from after creating the foobar.)
I think that ui-router allows nested states; is this something I would use? But I don't want the new view/component to be embedded in the current view --- I would expect a card or something to somehow "overlay" whatever view is showing.
I wouldn't use nested states for this, as they are intended for things such a master/detail navigation.
The answer to your question is "it depends", as many situations in programming there're always some tradeoffs you must consider. Depending if you're targeting a desktop or a mobile app you'll have more or less space to put these options on the screen. If there're a lot of configuration options you should define a completly different state on wich you layout them and apply this configuration when you come back to the list. If there are not too much of them or you want to keep them visible at the same time as the list, you can go with a SideNav panel that can be locked open depending on the resolution. An alternative I've used sometimes is using a subheader to show some controls, as you can make it "stick" below the header or let it go if you scroll the list. As I told you before is a matter of choices and tradeoffs, and some sense of usability and simplicity towards the final user. There's no silver bullet nor best practice, just follow your intuition. Good luck!
I am new to Windows programming, as in my previous work I've mostly been involved with web technologies, and mostly in the backend. I have inherited a Winforms application, and one of my biggest nightmares is navigating through the endless states a form can be in.
To give you an example, a form has the state 'New' and 'Edit' depending on whether the user decided to Add or Edit a record. On this form, we have logic. If this texbox has a certain value, then these other textboxes are disabled, etc. This leads to endless chaining of these rules. So, a textbox's TextChanged event will influence another field. It in turn will fire X event that changes the state of other controls. It quickly devolves into a tangled mess that is impossible to maintain.
There has to be a better way... something simple and elegant that solves this problem. Any suggestions?
What I do is to have a single method called FormatControls(). In this method, I implement all the logic such as myTextbox.Enabled = mycheckBox.Checked and so on.
I call this method from my event handlers in the form, such as on checked changed, etc... I also call it when appropriate (ie, form newly loaded with no data, record loaded from database, etc). This has suited me well for many years now, it makes everything less complex.
You are correct, if you do not have a pattern in use it can turn into a too-complex thing.
You can try to use tha Application.Idle event to perform the enable disable logic and insulate this part from the business logic part.
Depending on what controls you have on your form, you might be able to do away with the separate textboxes and add/delete buttons and replace the whole works with a DataGrid.
When designing a form I have the option of putting a close button at the bottom of the form. The form will also have a close form "x" button in the upper right corner of the window as provided by winforms.
Based on the principle of "There should be one and preferably only one obvious way to do it" I was thinking the close button should be removed because of the forms existing default functionality.
What have the rest of you found in your experience that works best for users or has been the standard for UI setup?
I have done a considerable amount of design work, and I can't say I have heard of the principle of, "There should be one way to do [some task]." In fact, I have heard (almost) the opposite: "There should always be one obvious way to do a task, but additional methods could be used to help different user types." An example of this is the ability to hit the "Save" button to save a document. But, you can also do "File > Save" and you can also hit Ctrl + S. Three ways to do the same task.
Also, if you're programming in a Windows environment (as it appears you are), you will automatically get multiple ways of closing a window. The [X], of course, Alt + F4 is typical, you can setup Ctrl + C, etc. I wouldn't particularly put a close button on the bottom of the form unless it flows with the form's input. For example, if you want to [Submit] or [Close] the form - does that make sense? Would it be better to [Submit] or [Cancel]? Think about what your users are doing and how they are using the form.
Here are some guidelines I follow:
If the form is an application (it was launched directly from Windows), it should probably not have a close button. Users expect to be able to close the application by clicking the X in the top-right corner.
If it is a dialog (it was launched from another window within your application) that simply displays information, it should probably have a close button and you can optionally leave the Windows close button as well.
If it is a dialog that allows the user to edit data it should have a Save or Apply button and a Cancel button but no Windows X. The reason is because it is ambiguous what it means. Should it save the data? Cancel it? Display a dialog asking them what they want to do?
In general I do agree that there should be only one way to do something. The reason is that a reasonable user will have to wonder if they do different things (even if they are named the same). Even if the user discovers they do similar things, they may wonder if they are subtly different.
Of course there are exceptions to the rule. For example, most users understand that the file menu, toolbar, and keyboard shortcuts of the same name all point to the same command.
I think that principle applies mostly to coding (and not for every language, think of Perl!), for UI's usually it's good to have different ways to do things... because it allows you to do things faster.
Think about any common operation like cut or paste, you can use the edit menu, the contextual menu, the keyboard shortcut or even the icons in the toolbar. Try to remove any of those ways of doing it in any application and you'll have hordes of users screaming to get it back.
So here the main principle is to not change what the user expects. Another remark: be consistent, though there might be different ways get access to the same functionality, all of them should work in the same way (I'd be very pissed of if copying with the keyboard shortcut did a different thing than copying with the right mouse button XD).
What do people think about using pretend hyperlinks, in Winforms apps?
Example:
In my example you would click "into" the Organisation record card for Acme Corp Inc or "into" the details of the next appointment.
If we ignore, for the moment, how the user edits the Organisation or adds/removes an appointment, is it a sensible UI in Winforms to use blue & underline to signify click here and i'll take you to a new screen
As in:
TextBox1.Font = New Font("Blah", 8.25!, FontStyle.Underline etc
TextBox1.ForeColor = Color.Blue
Not forgetting:
TextBox1.Cursor = Cursors.Hand
This would be for a reasonably rich application (for example a CRM) where you have a lot of different kinds of screens and the user is navigating between all sorts of records. And you want to show the user that he can navigate between detail views, grids, children, parents, siblings etc.
Pros:
it's familiar to users and it's
obvious, without being obtrusive or
taking up any screen real estate
easy to implement
the often-used alternative (a button
with an icon or even just three dots
[...]) looks a bit old-fashioned,
doesn't work very well in grids, and
takes up space
Cons:
with all the flexibility and control
you have in a Winforms front end, you
should be able to devise a smart ui
without needing to borrow from
browsers (maybe???)
these pseudo links won't behave as
true anchor tags (there won't be any
"visited" [ie. turn me purple if I've
already been in here] or "hover"
behaviour and no open-in-new-tab
features, without a lot of work) ... potentially annoying to users?
detracts from genuine hyperlinks (as
in email addresses etc) - these no
longer stand out as links "out to
the internet" (to the browser, to
email client) ... very minor issue?
Not even browsers work this way. Use a LinkLabel, not a TextBox.
In general, it’s a good idea to use hyperlinks (real or simulated) in thick-client apps for opening forms of additional information. It is helpful to distinguish between a control that merely navigates (a hyperlink) and a command that changes the underlying data (a command button), so the users know what they’re getting into. I don't think most users care (or even know) if a browser is involved or not. Navigating is navigating.
Making an attribute value look and act like a hyperlink like you’ve done is fine except for one thing that is a showstopper for most applications: it precludes any other interaction with the attribute. The user can’t edit or even copy the attribute value since any clicking in the field will launch the new form. Keep in mind that to edit a value, such as to correct a day of the month, the user may be inclined to click in the middle of the field to position the cursor. Even if you’re using a drop-down menu (e.g., to set the organization), you want to allow users to click in the field and select by typing the first few letters of the value they want. If your app has one drill-down-able field that needs to be editable, then for internal consistency none of your fields can use hyperlinks –all drilldown needs to be by some other method.
Also, while hyperlinks are intuitive for navigating, such as drill-down, I’m not so sure they’re good for assigning a field value. There is a difference between getting more information about Acme Corp organization (which is what your Acme Corp link implies) and getting a dialog to pick the organization for John Smith (an assignment function). So if your intent is assignment rather than true drill-down, then links are probably not a good idea. For assignment, the button with the three dots makes a lot of sense. Assignment changes the underlying data, so it should use a command button. It’s a natural extension of the button in a dropdown control. The three-dot button caption minimizes the space used and is associated with dialogs since that’s what they imply in menu and button captions. It might look old-fashioned, but that’s why it works –it’s consistent with past user experiences.
Looks okay to me. The concept of links has anyway already migrated from web to desktop applications. Users should accept this without problems (maybe after first ten minutes playing out with your program).
Also quite popular in enterprise applications.
Maybe consider changing the color, to, maybe brown or green, so that it doesn't immediately imply a native web link.
Also many web applications built with some event-driven frameworks (like ASP.NET WebForms, JSF etc.) heavily use links that do not link anywhere but invoke some server-side processing (basically an event handler). So it's not unusual use.
I don't like it. If I see a link I expect it to open a browser window when clicked. More standard would be to have a little "edit" button/icon next the label. You could get away with having a link-style "(edit)" after the text, that would also look quite normal rather than suggesting a browser is involved.
e.g:
Organisation: | Acme Dustbins (edit) |or
Organisation: | Acme Dustbins| (edit)
I have been getting more involved with WPF for about a year now. A lot of things are new and sometimes it is hard to get my head wrapped around it.
At the same time I am rereading the GOF Design Patterns book.
A few times I would stop in the middle because I would realize that a certain pattern is the very one used in some WPF functionality. Whenever such a realization hits me, I feel like my understanding of the related WPF principle just took a big leap. It's kind of like an aha-effect.
I also realized that I had a much easier time understanding Prism for example because the documentation does such a great job at explaining the patterns involved.
So here is my "question" (more like an effort):
In order to help us all to understand
WPF better it would be great if anyone
who also "spotted" a design pattern in
WPF could give a short explanation.
One pretty obvious example that I found is the Routed Event:
If an event is detected by a child
control and no handler has been
specified, it passes it along to its
parent and so on until it is finally
handled or no parent is found anymore.
Lets say we have an image on a button
that is inside a StackPanel that is
inside a window. If the user clicks
the image, the event will either be
handled by it (if handling code has
been specified) or "bubble" up until
one of the controls handles it. So
each control will get a chance to
react in this order.
Image
Button
StackPanel
Window
Once a control handles it, the
bubbling will stop.
This is the short explanation, for a
more precise one consult the WPF
literature.
This kind of functionality represents
the "Chain of Responsibility
Design Pattern" which states, that if
their is a request, it gets passed
along a responsibility chain to give
each object in it a chance to handle
it. The sender of the request has no
idea who will handle it which ensures
decoupling. For a more thorough
explanation follow the link.
The purpose here is merely to show how this (seemingly old 10+ years) idea found its way into our current technology and to offer another way of looking at it.
I think this is enough for a start and hope more parallels will be collected here.
Cheers, Thorsten
I don't think it is specific for WPF but the observer design pattern seems to be the foundation on which all event handling in .Net and WPF is based.
The observer design pattern is described as "Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.". In .Net with the += operator you subscribe to such a change in state. Subsequently you unsubscribe with the -= operator.
I'd say CommandBindings are pretty important and fundamental to the way I develop.
WPF Tutorial - Command Bindings and Custom Commands
MSDN Overview